Flexbox (CSS Flexible Box Layout) – это модель макета, которая позволяет упорядочивать элементы во flex-контейнере. Объекты внутри контейнера называются flex-элементами. Они равномерно распределяются по контейнеру, меняя свои размеры и позиции согласно установленным правилам упорядочивания и размещения в пространстве. С помощью Flexbox можно упорядочить разные по величине элементы в строках или столбцах так, чтобы более крупные объекты занимали больше места, чем объекты меньшего размера.
Где найти настройки Flexbox
Они находятся в панели "Адаптивные" на вкладке Flexbox.
Как пользоваться Flexbox
Установите флажок Использовать Flexbox. Текущий родительский элемент станет flex-контейнером, а на панели "Адаптивные" появятся свойства Flexbox.
Flexbox нельзя использовать в следующих случаях:
- текущий родительский элемент – текстовый, например
<p>или<h1>; - текущий родительский элемент содержит строчные элементы, например
<span>или<a>(это не относится к родительским элементам, представляющим собой страницы).
Все прямые дочерние объекты внутри контейнера теперь будут flex-элементами, за исключением вспомогательных слоев. Flex-элементы будут упорядочены по главной оси. Вы можете сделать ее горизонтальной или вертикальной, а также выбрать направление, в котором на ней будет размещаться контент. Поскольку ориентацию и направление во Flexbox можно менять, свойства принимают такие значения, как flex-start и flex-end вместо top, bottom, left или right.
Направление
Это свойство позволяет устанавливать главную ось и направление, в котором располагаются элементы.
| Значение | Поведение | Главная ось |
|---|---|---|
| row | Flex-элементы выстраиваются в строки в направлении написания и чтения текста (слева направо для таких языков, как русский). |
Горизонтальная |
| row-reverse | Flex-элементы выстраиваются в строки в направлении, противоположном написанию и чтению текста (справа налево для таких языков, как русский). |
Горизонтальная |
| column | Flex-элементы выстраиваются в столбцы в направлении потока контента (как правило, сверху вниз). |
Вертикальная |
| column-reverse | Flex-элементы выстраиваются в столбцы в направлении, противоположном потоку контента (как правило, снизу вверх). |
Вертикальная |
Интервал
Это свойство позволяет устанавливать расстояние между flex-элементами. Оно может подбираться автоматически или согласно заданным значениям.
| Интервал | Поведение |
|---|---|
| Стандартный | Flex-элементы автоматически размещаются во flex-контейнере в соответствии с настройками переносов и выравнивания по главной и поперечной осям. |
| Фиксированный | Flex-элементы размещаются согласно заданным значениям интервалов между дочерними элементами и интервалов между дочерними элементами и границами контейнера. |
Выравнивание
Это свойство позволяет устанавливать порядок размещения flex-элементов на главной оси. Настройка свойства доступна при использовании стандартного интервала.
| Значение | Поведение |
|---|---|
| flex-start | Flex-элементы размещаются в начале строки или столбца. |
| flex-end | Flex-элементы размещаются в конце строки или столбца. |
| center | Flex-элементы размещаются в середине главной оси. |
| space-between | Flex-элементы равномерно распределяются по главной оси так, чтобы первый был в начале контейнера, а последний – в конце. |
| space-around | Flex-элементы равномерно распределяются по главной оси, при этом первый и последний располагаются у границ контейнера с отступом от края в половину интервала. |
| space-evenly | Flex-элементы равномерно распределяются по главной оси с одинаковым интервалом, который также сохраняется для первого и последнего элементов. |
Выравнивание по поперечной оси
Это свойство позволяет управлять размещением flex-элементов на поперечной оси текущей строки или столбца.
| Значение | Поведение |
|---|---|
| flex-start | Flex-элементы располагаются в начале поперечной оси. |
| flex-end | Flex-элементы располагаются в конце поперечной оси. |
| center | Flex-элементы располагаются в середине поперечной оси. |
| stretch | Flex-элементы растягиваются и занимают всю поперечную ось. |
| baseline | Flex-элементы располагаются на поперечной оси так, что их базовые линии находятся на одном уровне. |
Перенос
Это свойство позволяет включать и отключать перенос объектов внутри контейнера. Настройка свойства доступна при использовании стандартного интервала.
| Значение | Поведение |
|---|---|
| nowrap | Flex-элементы располагаются в одну строку или один столбец. |
| wrap | Flex-элементы будут формировать несколько строк или столбцов, когда перестанут помещаться в одну строку или один столбец. |
| wrap-reverse | Flex-элементы будут формировать несколько строк или столбцов в направлении, противоположном поперечной оси, если не поместятся в одну строку или один столбец. |
Выравнивание при переносе
Это свойство позволяет управлять размещением во flex-контейнере нескольких строк или столбцов на поперечной оси, перпендикулярной главной. Настройка свойства доступна при использовании переноса и стандартного интервала.
| Значение | Поведение |
|---|---|
| flex-start | Строки или столбцы располагаются в начале контейнера без расстояния между ними. |
| flex-end | Строки или столбцы располагаются в конце контейнера без расстояния между ними. |
| center | Строки или столбцы располагаются в середине поперечной оси. |
| stretch | Строки или столбцы растягиваются по поперечной оси так, чтобы заполнить все доступное пространство, за исключением случаев, когда для них установлена фиксированная высота. |
| space-between | Строки или столбцы равномерно распределяются по поперечной оси, при этом первая и последняя строка или столбец располагается в начале и конце контейнера соответственно. |
| space-around | Строки или столбцы равномерно распределяются по поперечной оси, при этом отступ от границ контейнера составляет половину интервала. |
Интервал между дочерними элементами
Это свойство позволяет устанавливать расстояние в пикселях между двумя элементами в flex-контейнере, когда вы используете фиксированный интервал.
Интервал от границ контейнера
Это свойство позволяет устанавливать расстояние в пикселях между flex-контейнером и внешними элементами, когда вы используете фиксированный интервал.
Порядок дочерних элементов
В этом свойстве перечислены элементы в контейнере. Чтобы изменить порядок размещения элементов, перетаскивайте их на нужные места в списке.
Переставлять элементы можно также прямо в рабочей области.
Свойства дочерних элементов во Flexbox
У flex-элементов тоже есть свойства. Чтобы посмотреть и изменить Flexbox-настройки элемента, нажмите на него.
Flex-элементы могут растягиваться и сжиматься только с учетом минимальной и максимальной ширины и высоты. Свойства left и top у flex-элементов отключены, так как они определяются настройками Flexbox, а вот свойства преобразования можно использовать, чтобы смещать элементы.
Выравнивание по поперечной оси
Это свойство переопределяет выравнивание по поперечной оси, заданное для контейнера по умолчанию.
| Значение | Поведение |
|---|---|
| auto | Для flex-элемента действуют настройки выравнивания по поперечной оси, примененные к flex-контейнеру. |
| baseline | Базовая линия flex-элемента находится на одном уровне с базовыми линиями других flex-элементов с такими же настройками расположения. |
| center | Flex-элемент располагается в центре поперечной оси. |
| flex-end | Flex-элемент располагается в конце контейнера по поперечной оси. |
| flex-start | Flex-элемент располагается в начале контейнера по поперечной оси. |
| stretch | Flex-элемент растягивается по поперечной оси так, чтобы заполнить весь контейнер, за исключением случаев, когда для такого элемента установлена фиксированная высота. |
Фактор растяжения flex-элемента
Это свойство позволяет регулировать то, насколько flex-элемент будет растягиваться по главной оси, чтобы заполнить свободное пространство в контейнере. Коэффициент зависит от факторов растяжения других flex-элементов в той же строке или том же столбце. Настройка свойства доступна при использовании стандартного интервала.
Например, если в строке три flex-элемента с факторами растяжения 1, 1 и 2, последний из них займет в два раза больше свободного места в ряду, чем первые два по отдельности.
Если сумма факторов растяжения flex-элементов в ряду меньше 1, то такие элементы могут не занять все свободное место.
Flex-элемент с фактором растяжения 0 увеличиваться не будет.
Фактор сжатия flex-элемента
Это свойство позволяет регулировать то, насколько flex-элемент будет сжиматься по главной оси, чтобы поместиться в контейнере. Коэффициент зависит от факторов сжатия других flex-элементов в той же строке или том же столбце. Настройка свойства доступна при использовании стандартного интервала.
Например, если в строке три flex-элемента с факторами сжатия 1, 1 и 2, последний из элементов сожмется сильнее, чем два других по отдельности. Фактор сжатия учитывает размер flex-элемента.
Flex-элемент с фактором сжатия 0 сжиматься не будет.