Что такое Flexbox?

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

Основные концепции Flexbox:

• Основная ось (main axis): Ось, по которой располагаются элементы. По умолчанию горизонтальная (слева направо).
• Поперечная ось (cross axis): Ось, перпендикулярная основной оси. По умолчанию вертикальная (сверху вниз).
• Контейнер (flex container): Элемент, в котором применяются свойства Flexbox (display: flex или display: inline-flex).
• Элементы (flex items): Дочерние элементы контейнера.

Свойства для Flex-контейнера:

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

Свойства для Flex-элементов:

• order: Определяет порядок элемента в контейнере
• flex-grow: Определяет, насколько элемент должен увеличиваться, чтобы занять доступное пространство
• flex-shrink: Определяет, насколько элемент должен сжиматься, если места недостаточно
• flex-basis: Определяет начальный размер элемента перед распределением пространства
• flex: Сокращенное свойство для flex-grow, flex-shrink и flex-basis
• align-self: Переопределяет выравнивание элемента вдоль поперечной оси (flex-start, flex-end, center, baseline, stretch, auto)

Пример использования:

/* Контейнер */
.container {
  display: flex; /* Включает flexbox */
  flex-direction: row; /* Элементы располагаются в строку */
  justify-content: center; /* Выравнивание по центру горизонтали */
  align-items: center; /* Выравнивание по центру вертикали */
  height: 200px; /* Задаем высоту контейнера */
  border: 1px solid black;
}

/* Элементы */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox значительно упрощает создание адаптивных макетов по сравнению с традиционными методами (float, inline-block, table).