CSS Flexible Box Layout Module (CSS модуль для макетов с гибкими блоками), проще говоря Flexbox («флексбокс») — это технология, упрощающая верстку отдельных элементов HTML-страницы. Этот модуль предоставляет возможность при помощи CSS3 быстро и удобно позиционировать блоки на странице, подстраиваясь под разные варианты разрешения экрана. В этой статье мы узнаем, как быстро и легко верстать современные веб-страницы на основе этой техники.
Содержание:
1. Флексбокс — принцип работы
2. Краткая история редакций
3. Введение в основы: главная и поперечная ось flex-контейнера, flex-direction
4. Правила переноса блоков: flex-wrap и flex-flow
5. Выравнивание флексов
6. Очередность компонентов флексбокс: order
7. Настройка «гибкости» элементов (flex-grow, flex-shrink)
8. CSS Grid Layout vs CSS Flexbox Layout
Заключение
С появлением Flexbox позиционирование элементов существенно упростилось. До появления Flexbox для позиционирования блоков приходилось использовать свойства float: left/right и тому подобные вещи, нужно было также указывать ширину и отступ, например, padding — отступ от содержимого до края блока, margin — расстояние от одного блока до другого и т.д.
Кроме того, нужно было еще все это и высчитывать
Так что же такое Flexbox? Это модуль, включающий в себя ряд свойств и их значений, как для родителя флекс-контейнера, так и для дочерних флекс-элементов (флексов). Забегая вперед, сразу перечислим основные CSS-свойства для описания Flex-технологии.
В случае флекс-контейнера мы имеем дело со следующими свойствами: display, flex-direction, flex-wrap, flex-flow, direction wrap, justify-content, align-content, align-items, column-gap и gap.
Для элементов контейнера задействуются такие CSS-свойства: flex-grow, flex-shrink, flex-basis, flex: {grow shrink basis}, align-self и order. Значения всех этих свойств и их влияние на верстку мы будем рассматривать ниже.
Овладеть тонкостями работы с CSS Flexbox можно на курсах наших партнеров в Mate Academy, Robot Dreams, Powercode Академия. Практикующие специалисты помогут вам освоить нужную информацию на 100%.
Сильная сторона Flexbox заключается в его адаптивности под направление текста. Гибкие блоки сжимаются и растягиваются, выстраиваются в ряд или образуют столбцы, выравниваются как по вертикали, так и по горизонтали, причем их очередностью можно управлять через CSS. При этом, их размер может быть заранее неизвестен или постепенно меняться — отсюда и название flex, означающее «гибкий». Корректируя ориентацию и размер элементов, контейнер Flexbox каждый раз подстраивается под требуемые условия.
Разработка CSS Flexible Box Layout началась еще в 2008 году. С тех пор вышло несколько редакций, имеющих свои особенности:
Ознакомиться подробнее с поддержкой и совместимостью с разными типами браузеров можно на сайте caniuse.com.
Для конфигурации модуля Flexbox применяется набор терминов. Прежде всего это две оси, на которые нужно ориентироваться при позиционировании — главная и поперечная
Главной осью flex-контейнера (main axis) является направление, относительно которого располагаются дочерние элементы контейнера. Поперечная ось представляет собой направление, перпендикулярное главной оси.
Перевести контейнер в «гибкое» состояние несложно. Необходимо всего лишь изменить свойство display:flex или display:inline-flex.
HTML
<div class="my-flex-container">
<div class="my-flex-block">item1</div>
<div class="my-flex-block">item2</div>
<div class="my-flex-block">item3</div>
</div>
CSS
.my-flex-container{
display: flex;
}
Flex-элементы следует воспринимать как первичные раскладки в горизонтальных рядах или вертикальных столбцах. Направление главной оси устанавливается базовым css-свойством flex-direction. Оно содержит четыре возможных значения:
rowrow-reversecolumncolumn-reverseТак, например, при выборе row или row-reverse главная ось проходит вдоль строки в направлении ряда. При выборе column или column-reverse, главная ось имеет направление сверху вниз — в направлении блока.
.parent {
flex-direction: row /* default */ или row-reverse
или column
или column-reverse
}
Важное обстоятельство, которое стоит учитывать: при изменении осей меняются только направления движения блоков внутри, а начало, конец и размер контейнера остаются прежними. Также следует иметь в виду, что Flexbox не определяет режим написания документа.
Ранее CSS был оптимизирован под горизонтальный режим, с режимом письма слева направо. Теперь же логичное предположение о том, что строка текста идет из верхнего левого угла макета в правую сторону, а новые строки появляются одна под другой, уже неверно.
В процессе верстки flex-элементы будут пытаться расположиться на одной строке. Такой порядок размещения флексов можно изменить, позволив элементам перескочить на следующую строку, по мере необходимости. Для этого необходимо настроить свойство flex-wrap:
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap (вариант по умолчанию) — элементы контейнера занимают положение в один ряд (если direction=row) или в одну колонку (если direction=column). Такое размещение не зависит от того, помещаются они в контейнер или нет.wrap — если элементы не помещаются в контейнер, тогда они переносятся на следующий ряд. Тем самым осуществляется движение элементов вдоль поперечной оси.wrap-reverse — перемещение аналогичное wrap, только не вниз, а вверх (в обратном направлении).Поскольку свойства flex-direction и flex-wrap часто используются вместе, то для удобства было придумано свойство flex-flow. Оно может одновременно иметь значения и flex-direction, и flex-wrap — разделенные пробелом, — а может содержать значение только для какого-то одного свойства.
/* исключительно для flex-direction */flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* исключительно для flex-wrap */flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* сразу оба значения: и flex-wrap, и flex-direction */flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse;
Относительно основной оси для выравнивания используется justify-content.
Положением флексов относительно основной оси управляет CSS-свойство justify-content.
Чтобы использовать различные способы размещения элементов, задаются следующие значения justify-content (при direction=row выравнивание выполняется по горизонтали, при direction=column — по вертикали):
flex-start (дефолтный вариант) — положение компонентов контейнера выравниваются относительно начала главной оси.flex-end — блоки контейнера сдвигаются в конец главной оси.center — центр группы элементов контейнера совмещается с центром главной оси.space-between — первый компонент контейнера помещается в начало главной оси, последний элемент – ставится в конец. Прочие элементы равномерно заполняют свободное место.space-around — все части контейнера равномерно выставлены вдоль главной оси, заполняя все свободное пространство поровну.space-evenly — части распределяются так, чтобы расстояние между любыми соседними компонентами (и расстояние до краев) было одинаковым.Относительно поперечной оси: свойство align-items и align-content.
Свойство align-items говорит о том, как флексы будут располагаться относительно поперечной оси. Существуют несколько вариантов выравнивания:
flex-start/ start/ self-start — компоненты позиционируются либо по верхнему краю (при расположении в строку), либо по левому краю (при расположении в столбик) контейнера.flex-end/ end/ self-end — вариант размещения элементов по нижнему краю контейнера (при расположении в строку) или по правому краю (при расположении в столбик).stretch — такое значение свойство принимает по умолчанию. В этом случае flex-элементы растягиваются на всю высоту контейнера (при расположении в строку) либо на всю ширину контейнера (при расположении в столбик).center — центрирование элементов относительно поперечной оси flex-контейнера.baseline — элементы выравниваются в соответствии со своей базовой линией.safe и unsafe — эти слова могут комбинироваться с любыми из перечисленных выше значений, предотвращая недоступность содержимого элементов в процессе выравнивания..container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
Этот инструмент применяется не очень часто. В разметке он обеспечивает выравнивание рядов с элементами по поперечной оси. То же, что justify-content, только для противоположной оси. Align-content работает только в многострочном режиме (при flex-wrap:wrap или flex-wrap:wrap-reverse).
stretch (свойство по умолчанию) — строки с элементами растянуты, чтобы заполнить все имеющееся пространство.flex-start — ряды элементов прижаты к началу flex-контейнера.flex-end — ряды элементов прижаты к концу flex-контейнера.center — положение рядов блоков устанавливается по центру flex-контейнера.space-around — ряды блоков равномерно распределены от начала до конца flex-контейнера, разделяя все свободное пространство поровну.space-between — первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок — в конце, все остальные ряды равномерно распределены в оставшемся пространстве.Как уже было сказано выше, свойство align-content должно использоваться с контейнером, а не его дочерними элементами. Отдельным флексам можно переопределять правило выравнивания при помощи свойства align-self.
Компоненты флекс-контейнера размещены в некоторой последовательности. Задав значение order, очередностью их расположения можно управлять. Исходное значение свойства order: 0. Для задания очередности появления компонентов в контейнере укажите числовое значение
.child {
order: 0 /* дефолтное значение*/ или <number>
}
Порядок компонентов зависит от очередности их появления в HTML-коде, а также от направления ряда. Когда компонент не является флекс-элементом order. Компоненты контейнера с идентичными значениями order возвращаются к исходному способу группировки.
Ниже показан вариант, когда order задействуется для выставления элементов 1, 2, 3, 4, 5 в очередность 3, 5, 1, 2, 4.
HTML
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: vertical;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
.flex-item:nth-of-type(1) { order: 13; }
.flex-item:nth-of-type(2) { order: 14; }
.flex-item:nth-of-type(3) { order: 11; }
.flex-item:nth-of-type(4) { order: 15; }
.flex-item:nth-of-type(5) { order: 12; }
.flex-item {
background: blue;
padding: 12px;
width: 80px;
height: 80px;
margin: 12px;
line-height: 80px;
color: white;
font-weight: bold;
font-size: 5em;
text-align: center;
}
Здесь следует понимать, что числовые значения, присваиваемые элементам, не являются их идентификаторами и порядковыми номерами. Это всего лишь «веса» занимаемой позиции. Например, вместо чисел 0, 1, 2 и т.д. вы с тем же успехом можете использовать 100, 200, 300 и даже отрицательные числа.
«Гибкостью растяжения» отдельных элементов можно управлять. Для этого используется пропорция, числовые значения которой определяют, насколько будет растянут тот или иной флекс внутри контейнера.
Например, если все компоненты имеют значение этого свойства равным единице, а один блок имеет свойство, равное двум, то его размер будет в два раза больше. По умолчанию значение flex-grow равно нулю.
.item {
flex-grow: <положительное число>;
}
flex-shrink
Если flex-grow отвечает за растяжение элементов, то flex-shrink управляет их сжатием. Значение по умолчанию — единица. Чем больше число, тем меньше «жадность» блока — меньше его размер:
.item {
flex-shrink: <положительное число>;
}
Это свойство задает базовую ширину флекс-компонента — ширину — до того, как будут рассчитаны прочие условия, влияющие на размер. Значение указывается в px, em, rem, %, vw, vh и т.д. Конечная ширина будет определяться базовым значением ширины, а также величинами flex-grow и flex-shrink и, конечно, содержанием блока. По умолчанию используется режим auto, в котором элемент имеет базовую ширину относительно контента внутри него.
Сразу три свойства записываются в короткой форме — flex: {grow shrink basis}. По умолчанию flex: 0 1 auto. Такой вариант записи предпочтительнее, так как более он компактен. Синтаксис записи свойства выглядит так:
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Последние два свойства флекс-контейнера — column-gap и gap. Они задают размер промежутка между элементами: column-gap — раздвигает колонки, gap — раздвигает и колонки и ряды.
При работе над очередным макетом у многих пользователей возникает вопрос: какой технологии отдать предпочтение — CSS Grid Layout или CSS Flexbox Layout. Действительно, эти технологии близки и во многих случаях взаимозаменяемы.
Однако между ними есть существенное отличие. Технология CSS Grid Layout управляет положением элементов сразу в двух направлениях — столбцах и строках. Верстка по технологии CSS Flexbox Layout просто этого делать не позволяет. Поэтому если в процессе работы над макетом вы часто задействуете функцию calc(), то, скорее всего, текущая задача оптимально решается не флексбоксом, а именно CSS Grid Layout.
В конечном итоге все сводится к постановке задачи, где прописано поведение элементов в макете. С другой стороны, технология Grid может быть недоступна по причине несовместимости с некоторыми версиями браузеров (например — в IE 11 и ниже). В любом случае технологии CSS Grid Layout и CSS Flexbox Layout не являются альтернативными, а скорее, дополняют возможности друг друга, предлагая в разных случаях более простой код описания макета
Мы рассмотрели основные задачи и методы управления «гибкой» версткой. Надеемся, наша «шпаргалка» будет вам полезна. Закрепить навыки работы с Flexbox можно только практикой. Поэтому в завершение предлагаем вам также посмотреть видео с мастер-классом по адаптивной верстке.
Также прикладываем ролик, в котором объясняется, в чем отличие Float, Flexbox и Grid CSS
Начинающие знатоки CSS могут попробовать закрепить навыки в игровой форме с помощью забавной игрушки, развивающей понимание тех или иных свойств флексбокса: http://flexboxfroggy.com/. Также будет полезен визуальный конструктор flex-кода, доступный здесь: https://bennettfeely.com/flexplorer/
Сегодня мы поговорим о том, как выбрать лучшие курсы Power BI в Украине, особенно для…
В 2023 году во всех крупнейших регионах конкуренция за вакансию выросла на 5–12%. Не исключением…
Unicorn Hunter/Talent Manager Лина Калиш создала бесплатный трекер поиска работы в Notion, систематизирующий все этапы…
Edtech-стартап Mate academy принял решение отправить своих работников в десятидневный отпуск – с 25 декабря…
Служба безопасности Украины задержала в Киеве 46-летнего программиста, который за деньги устанавливал шпионские программы и…
IT-специалист Джордан Катлер создал и выложил на Github подборку разнообразных ресурсов, которые помогут достичь уровня…
