Flexbox. Свойства flex container

Определяет гибкий контейнер; встроенный или блочный в зависимости от заданного значения. Это позволяет использовать гибкий контекст для всех его прямых дочерних элементов.

.container {
  display: flex; /* or inline-flex */
}

Обратите внимание, что столбцы CSS не влияют на гибкий контейнер.
 

flex-direction

Устанавливает главную ось, определяя, таким образом, направление, в котором элементы flex размещаются в контейнере flex. Flexbox (помимо необязательной упаковки) представляет собой концепцию компоновки в одном направлении. Представьте, что элементы flex в основном располагаются либо горизонтальными рядами, либо вертикальными столбцами.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row — в ряд (по умолчанию).
• column — в столбик.
• row-reverse — в ряд, но в обратном порядке.
• column-reverse — в столбик, но в обратном порядке.
   

flex-wrap

По умолчанию все элементы flex будут пытаться поместиться в одну строку. Вы можете изменить это и разрешить перенос элементов по мере необходимости с помощью этого свойства.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap — не переносить (по умолчанию).
• wrap — переносить на новую строку.
• wrap-reverse: элементы flex будут располагаться на нескольких линиях снизу вверх.

 

flex-flow

Это сокращение для свойств flex-direction и flex-wrap, которые вместе определяют главную и поперечную оси гибкого контейнера. По умолчанию используется значение row nowrap.

.container {
  flex-flow: column wrap;
}

justify-content

Определяет выравнивание вдоль главной оси. Она помогает распределить дополнительное свободное пространство, оставшееся после того, как все гибкие элементы в строке стали негибкими или гибкими, но достигли своего максимального размера. Он также позволяет контролировать выравнивание элементов, когда они переполняют линию.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start (по умолчанию): Элементы выравниваются по началу направления flex-direction.
• flex-end: Элементы выравниваются по концу направления flex-direction.
• start: Элементы выравниваются по началу направления writing-mode.
• end: Элементы выравниваются по концу направления writing-mode.
• left: Элементы выравниваются по левому краю контейнера, если это имеет смысл в рамках flex-direction. В противном случае ведут себя как start.
• right: Элементы выравниваются по правому краю контейнера, если это имеет смысл в рамках flex-direction. В противном случае ведут себя как end.
• center: Элементы центрируются по линии.
• space-between: Элементы равномерно распределяются по линии; первый элемент находится у начальной линии, последний — у конечной.
• space-around: Элементы равномерно распределяются по линии с равным пространством вокруг них. Визуально пространства не равны, так как каждый элемент имеет равное пространство с обеих сторон. Первый элемент будет иметь одно единичное пространство от края контейнера, но два единичных пространства до следующего элемента, потому что следующий элемент также имеет свое собственное пространство.
• space-evenly: Элементы распределяются так, что пространство между любыми двумя элементами (и до краев контейнера) одинаковое.

Примечание: Поддержка браузерами этих значений может отличаться. Например, space-between не поддерживался в некоторых версиях Edge, а start/end/left/right пока не поддерживаются в Chrome. На MDN есть подробные таблицы совместимости. Наиболее безопасные значения — flex-start, flex-end и center.

Также есть два дополнительных ключевых слова, которые можно использовать вместе с этими значениями: safe и unsafe. Использование safe гарантирует, что при любом позиционировании элемент не будет вытолкнут за пределы экрана (например, за верхний край) так, что его содержимое нельзя будет прокрутить (это называется "потерей данных").

 

align-items

Это определяет поведение по умолчанию для расположения элементов flex вдоль поперечной оси в текущей строке. Считайте, что это версия justify-content для поперечной оси (перпендикулярной основной оси).

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch (по умолчанию): Элементы растягиваются, чтобы заполнить контейнер (с учетом min-width и max-width).
• flex-start / start / self-start: Элементы размещаются в начале поперечной оси (cross axis). Разница между этими значениями незначительна и связана с учетом правил flex-direction или writing-mode.
• flex-end / end / self-end: Элементы размещаются в конце поперечной оси (cross axis). Разница также незначительна и связана с учетом правил flex-direction или writing-mode.
• center: Элементы центрируются по поперечной оси.
• baseline: Элементы выравниваются по их базовой линии (baseline).

Ключевые слова-модификаторы safe и unsafe могут использоваться вместе с остальными значениями (хотя поддержка браузерами может отличаться). Они помогают предотвратить выравнивание элементов таким образом, что их содержимое становится недоступным (например, уходит за пределы экрана).

 

align-content

Выравнивает строки гибкого контейнера, если на поперечной оси есть лишнее пространство, подобно тому, как justify-content выравнивает отдельные элементы на главной оси.

Примечание: Это свойство действует только для многострочных гибких контейнеров, в которых для flex-wrap установлено значение wrap или wrap-reverse). Однострочный гибкий контейнер (т. е. если для flex-wrap установлено значение по умолчанию - no-wrap) не будет отражать align-content.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal (по умолчанию): Элементы располагаются в своей стандартной позиции, как если бы значение не было задано.
• flex-start / start: Элементы выравниваются по началу контейнера. Более поддерживаемое значение flex-start учитывает направление flex-direction, а start учитывает направление writing-mode.
• flex-end / end: Элементы выравниваются по концу контейнера. Более поддерживаемое значение flex-end учитывает направление flex-direction, а end учитывает направление writing-mode.
• center: Элементы выравниваются по центру контейнера.
• space-between: Элементы равномерно распределяются; первый элемент находится в начале контейнера, а последний — в конце.
• space-around: Элементы равномерно распределяются с одинаковым пространством вокруг каждого элемента.
• space-evenly: Элементы равномерно распределяются с одинаковым пространством вокруг них.
• stretch: Элементы растягиваются, чтобы заполнить оставшееся пространство.

Ключевые слова-модификаторы safe и unsafe могут использоваться вместе со всеми остальными ключевыми словами (хотя обратите внимание на поддержку браузерами) и помогают предотвратить выравнивание элементов таким образом, что содержимое становится недоступным.

Свойство gap явно управляет пространством между элементами flex. Оно применяет это расстояние только между элементами, но не на внешних границах.
 

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

Это поведение можно представить как минимальный водосток, так как если водосток будет больше (из-за чего-то вроде justify-content: space-between;), то gap будет действовать только в том случае, если это пространство в итоге окажется меньше.

Это не только для flexbox, gap также работает в сетке и многоколоночной верстке.