Flexbox (или Flexible Box Layout) — это CSS модуль, предназначенный для создания гибких макетов элементов в контейнере, позволяя легко распределять пространство и выравнивать элементы, даже когда их размеры неизвестны или динамически изменяются.

Основная концепция Flexbox — это flex-контейнер и его flex-элементы.

Свойства для Flex-контейнера (display: flex;):

flex-direction: Определяет направление размещения flex-элементов в контейнере (главная ось).
- row (по умолчанию): по горизонтали, слева направо.
- row-reverse: по горизонтали, справа налево.
- column: по вертикали, сверху вниз.
- column-reverse: по вертикали, снизу вверх.
flex-wrap: Определяет, переносятся ли flex-элементы на новую(ие) строку(и), если они не помещаются в одну строку контейнера.
- nowrap (по умолчанию): все элементы в одну строку.
- wrap: переносятся на новую строку.
- wrap-reverse: переносятся на новую строку, но в обратном порядке.
justify-content: Выравнивает flex-элементы вдоль главной оси.
- flex-start (по умолчанию): выравнивание по началу главной оси.
- flex-end: выравнивание по концу главной оси.
- center: выравнивание по центру главной оси.
- space-between: равномерное распределение с отступами между элементами.
- space-around: равномерное распределение с отступами вокруг элементов.
- space-evenly: равномерное распределение с одинаковыми отступами между и вокруг элементов.
align-items: Выравнивает flex-элементы вдоль поперечной оси (перпендикулярно главной).
- stretch (по умолчанию, если flex-элементы не имеют заданной высоты/ширины): растягивает элементы по высоте/ширине поперечной оси.
- flex-start: выравнивание по началу поперечной оси.
- flex-end: выравнивание по концу поперечной оси.
- center: выравнивание по центру поперечной оси.
- baseline: выравнивание по базовой линии текста.
align-content: Выравнивает строки flex-элементов вдоль поперечной оси, когда есть перенос строк (flex-wrap: wrap). Ведет себя analogous justify-content только для поперечной оси.
- stretch (по умолчанию): растягивает строки.
- flex-start: выравнивание строк по началу поперечной оси.
- flex-end: выравнивание строк по концу поперечной оси.
- center: выравнивание строк по центру поперечной оси.
- space-between: равномерное распределение строк с отступами между ними.
- space-around: равномерное распределение строк с отступами вокруг них.
gap, row-gap, column-gap: Задает промежутки между flex-элементами (в виде единого значения или раздельно для строк и колонок).

.flex-container {
  display: flex; /* Делает элемент flex-контейнером */
  flex-direction: row; /* Элементы располагаются по горизонтали */
  flex-wrap: wrap; /* Элементы переносятся на новую строку */
  justify-content: center; /* Элементы выравниваются по центру главной оси */
  align-items: center; /* Элементы выравниваются по центру поперечной оси */
  gap: 10px; /* Промежуток 10px между flex-элементами */
}

Свойства для Flex-элементов (прямые потомки flex-контейнера):

order: Определяет порядок размещения flex-элемента в контейнере (по умолчанию 0). Элементы с меньшим значением появляются раньше.
flex-grow: Задает коэффициент, определяющий, насколько flex-элемент может растягиваться относительно других элементов в контейнере, занимая доступное пространство. По умолчанию 0.
flex-shrink: Задает коэффициент, определяющий, насколько flex-элемент может сжиматься при недостатке пространства. По умолчанию 1.
flex-basis: Задает базовый размер flex-элемента до распределения свободного пространства. Может быть вpx, %, rem, auto и т.д. (по умолчанию auto).
flex: Сокращенное свойство для flex-grow, flex-shrink, flex-basis (например, flex: 1 1 0;).
align-self: Переопределяет выравнивание элемента вдоль поперечной оси, заданное align-items для контейнера. Принимает те же значения, что и align-items.

.flex-item {
  order: 2; /* Этот элемент будет отображен вторым, независимо от его положения в HTML */
  flex-grow: 1; /* Этот элемент будет занимать оставшееся место */
  flex-shrink: 0; /* Этот элемент не будет сжиматься */
  flex-basis: 100px; /* Базовый размер элемента 100px */
  align-self: flex-start; /* Выравнивание этого элемента по началу поперечной оси */
}

.another-item {
  flex: 1 1 auto; /* Сокращенная запись grow: 1, shrink: 1, basis: auto */
}

Flexbox позволяет создавать различные макеты, от простых выравниваний до более сложных адаптивных структур, управляя распределением пространства и выравниванием элементов внутри контейнера.

Как использовать flexbox для верстки элементов на странице?