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

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-элементами (в виде единого значения или раздельно для строк и колонок).

css

Свойства для 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.

css

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