Flexbox (“флексбокс”) — CSS-механизм, предназначенный для построения сеток и создания сложных раскладок блоков.
На текущий момент поддержка флексбокса в современных браузерах довольно хорошая, его смело можно использовать уже сейчас.
Свойство display: flex
делает эелемент флекс-контейнером, прямые потомки (первого уровня вложенности) превращаются вофлекс-элементы.
Особенности flexbox:
- флекс-элементы, в отличие от блочных элементов, не растягиваются на всю ширину контейнера по умолчанию;
- на флекс-элементы не действует float, vertical-align
- ширина, высота, внутренние отступы и рамки для флекс-контейнеров и флекс-элементов работают как обычно
- внешние отступы (margin) не схлопываются и не выпадают, значение auto центрирует элементы по вертикали и горизонтали, а также «ломает» механизмы выравнивания.
Свойство flex-direction “Главная ось”
Свойство flex-direction
— задает направление главной осифлекс-контейнера. Принимает значения:
row
— главная ось направлена слево направо (по умолчанию);
column
— главная ось направлена сверху вниз;
row-reverse
— главная ось направлена справа налево;
column-reverse
— главная ось направлена снизу вверх;
Флекс-элементы всегда располагаются вдоль главной оси.
Существует также направление поперечной оси, вдоль этой оси рассчитывается высота элементов и вертикальные выравнивания. Поперечная ось всегда перпендикулярна главной оси. Если главная ось направлена горизонтально (row
или row-reverse
), то поперечная ось — смотрит вниз; если главная ось направлена вертикально (column
или column-reverse
) — то поперечная ось смотрит направо. Поперечная ось никогда не смотрит вверх или влево. Свойства для поворота поперечной оси нет.
Свойство justify-content “Выравнивание по горизонтали”
Свойство justify-content
— определяет выравнивание вдоль главной оси и при этом не меняет порядок элементов, как это происходит при изменении направления оси. Элементы просто прижимаются к началу, концу, средине или по ширине главной оси. Возможные значения:
flex-start
— элементы располагаются в начале главной оси (по умолчанию);
flex-end
— элементы располагаются в конце;
center
— элементы располагаются по центру;
space-between
— элементы выравниваются по ширине, расстояния между соседними элементами — динаковые, а от краевотступов нет;
space-around
— элементы выравниваются по ширине, расстояния между соседними элементами — одинаковые, но между элементами и краями есть отступы (равные половине расстояния между соседними элементами).
Свойство align-items “Выравнивание по вертикали”
Свойство align-items
— определяет выравнивания вдоль поперечной оси. Значения:
stretch
— элементы растянутся на всю «высоту» контейнера (по умолчанию);
flex-start
— элементы располагаются в начале поперечной оси;
flex-end
— элементы располагаются в конце;
center
— элементы выравниваются по центру;
baseline
— элементы выравниваются по базовой линии(находятся на «одной строке»), эта воображаемая линия проходит по нижней части текста;
Флекс-элементы по умолчанию растягиваются на всю высоту контейнера. Если у элемента задана высота (
height
), то растягиваться он не будет.
Свойство align-self “Эгоистичное выравнивание”
Свойство align-self
— позволяет задавать элементам разноепоперечное выравнивание и задается для конкретных элементов, а не всео контейнера. Значения:
stretch
— элемент растягивается на всю «высоту» контейнера (по умолчанию);
flex-start
— элемент располагается в начале поперечной оси;
flex-end
— элемент располагаются в конце;
center
— элемент выровнивается по центру;
baseline
— элемент выравнивается по базовой линии, эта воображаемая линия проходит по нижней части текста;
Свойство flex-wrap “Перенос”
Свойство flex-wrap
— управляет переносом элементов на новую строку. Значения:
nowrap
— перенос элементов на новую строку запрещен (по умолчанию). Элементы будут сжаты до минимально возможной ширины (даже если задать ее явно), затем выйдут за пределы контейнера располагаясь в один ряд;
wrap
— перенос разрешен;
wrap-reverse
— перенос разрешен, но ряды будут располагатьсяв обратном порядке (относительно поперечной оси);
Свойство align-content “Распределение рядов”
Свойство align-content
— управляет выравниванием рядоввдоль поперечной оси. Отличие от align-items в том, что свойствовлияет на ряды, а не на отдельные элементы. Значения:
stretch
— ряды растягиваются по всей поперечной оси (по умолчанию);
flex-start
— ряды располагаются в начале поперечной оси;
flex-end
— ряды располагаются в конце поперечной оси;
center
— ряды располагаются по центру поперечной оси;
space-between
— ряды выравниваются по ширине, расстояния между соседними рядами — динаковые, а от краев отступов нет;
space-around
— ряды выравниваются по ширине, расстояния между соседними рядами — одинаковые, но между рядами и краями есть отступы.
В чем разница между
align-items
vsalign-content
. Если в контейнере появляется несколько рядов элементов, вместо align-items начинает действовать свойство align-content. Если есть только 1 ряд элементов, то работает — align-items. Если есть несколько рядов, то работает — align-content. Выравнивание рядов, можно сказать, переопределяет выравнивание элементов.
Важный момент: приalign-content: stretch
отображение строк зависит от значения align-items. Если у align-items задано значениеalign-items: stretch
— то элементы в строках растягиваются на всю высоту своей строки. В противном случае — элементы в строках ужимаются под свое содержимое и выравниваются в зависимости от значенияalign-items: *
.
Свойство order “Порядковый номер”
Свойство order
— позволяет менять порядок следования элементов в потоке, не меняя HTML-код. Значение: число (положительное или отрицательное). По умолчанию 0
, сортировка производится по возрастанию.
Свойство flex-basis “Базовый размер”
Свойство flex-basis
— задает базовый размер элемента,размер элемента вдоль главной оси. Это начальный илиисходный размер вдоль главной оси. Значение по умолчанию —auto
.
Если главная ось направлена горизонтально, то главный размер — это ширина (width
), а поперечный размер — это высота (height
). Если главная ось направлена вертикально, то все наоборот.
Если flex-basis не задан или его значение равно auto
, то базовый размер берется из width
или height
. Свойство flex-basis принимает те же значения, что и width и heigh, но является «сильнее» и переопределит либо ширину, либо высоту в зависимости от направления главной оси.
Базовый размер — это исходный размер флекс-элементов до применения flex-grow.
Свойство flex-grow “Коефициент растягивания”
Свойство flex-grow
— задает коефициент растягивания (будет ли растягиваться элемент на свободное пространство), принимает неотрицательные числовые значения (по умолчанию —0
). Значение flex-grow: 0
означает, что элемент не будет растягиватьcz на свободное место во флекс-контейнере. Значение flex-grow: > 0
(больше нуля), означает, что элементбудет растягиваться, «захватывая» оставшееся свободное место. Если сразу у нескольких флекс-элементов значение flex-grow больше нуля, то они будут делить свободное место между собой. Свободное место будет добавляться флекс-элементам пропорционально значениям. При этом важно не само значение коэффициента, а его соотношение с коэффициентами остальных элементов, например: 1 и 2 = 1:2, 30 и 40 = 3:4 и т.д.
Рассчитать flex-grow
по формуле можно так:
- СМ (Свободное место) = Ширина контейнера — Сумма базовых размеров элементов flex-basis
- ДСМ (Доля свободного места) = СМ / Сумма flex-grow всех элементов
- Итоговый размер = Базовый размер flex-basis + (ДСМ * flex-grow)
При flex-basis: 0
свободное место будет занимать всю ширину флекс-контейнера, и коэффициенты растягивания будут другими.
Использовать
flex-basis: 0
иflex-grow
для точного управления относительными размерами не стоит. Лучше использоватьflex-basis: %
.На размер оставшегося свободного места влияет не только flex-basis, но и рамки, и отступы. Если flex-basis явно задано нулевое значение, то min-width на размер свободного места влиять не будет, так как ограничения размеров к флекс-элементам применяются уже после перераспределения свободного места.
Свойство flex-shrink “Коефициент сжатия”
Свойство flex-shrink
— отвечает за сжатие флекс-элементов. Флекс-элементы стараются быть максимально «гибкими» и не выпадать из контейнера, поэтому у flex-shrink имеет значение по умолчанию 1
. Свойство принимает неотрицательные числовые значения.
Если flex-shrink: > 0
, то элемент будет уменьшаться, «впитывая» часть отрицательного пространства, если оно существует. Если flex-shrink: 0
, то элемент уменьшаться не будет.
Свойство flex-shrink работает схожим образом со свойством flex-grow и задает пропорции, в которых флекс-элементы «впитывают» отрицательное пространство. Чем больше значение свойства у элемента, тем больше отрицательного пространства он «впитает» и тем сильнее сожмется. Доля отрицательного пространства, которую «впитает» элемент, зависит от соотношения коэффициента сжатия элемента с коэффициентами других элементов и соотношения базового размера элемента с базовыми размерами других элементов.
Рассчитать flex-shrink
по формуле можно так:
- ОП (Отрицательное пространство) = Ширина контейнера — Сумма базовых размеров элементов flex-basis
- СПБР (Cумма произведений базовых размеров) = (Базовый размер1 * flex-shrink1) + (Базовый размер2 * flex-shrink2) + … + (Базовый размерn * flex-shrinkn)
- НКС (Нормированный коэффициент сжатия) = (Базовый размер * flex-shrink) / СПБР
- Итоговый размер = Базовый размер — (НКС * ОП)
Элементы сжимаются в пределах своих базовых размеров, внутренние отступы и рамки не сжимаются.
min-width
применяется к элементам после этапа перераспределения свободного места или отрицательного пространства.
Cвойство flex “Сокращенная запись”
Свойство flex
— является сокращенной записью трех свойтвflex-grow
flex-shrink
flex-basis
(коэффициенты растягивания — коэффициенты сжатия — базовый размер).
Пример значений свойства flex:
flex: initial; -> flex: 0 1 auto;
flex: auto; -> flex: 1 1 auto;
flex: none; -> flex: 0 0 auto;
flex: 1 0 300px -> flex: 1 0 300px;
flex: 1 0; -> flex: 1 0 0%;
flex: 1; -> flex: 1 1 0%;
При flex-wrap: wrap
свойство flex-shrink работает как обычно, но при нехватке места в строке флекс-элементы будут переноситься на новую строку. Для элемента, базовый размер которого больше размера контейнера, будет применсять свойство flex-shrink (единственный случай, когда flex-shrink делает что-то полезное в многострочном контейнере).
Пример использования флексбоксов:
.flex-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: baseline;
align-content: stretch;
flex-wrap: wrap;
}
.element {
align-self: stretch;
order: -1;
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 2;
}
Блоки растянутся на всю высоту контейнера.
Изображения взяты: тут