Как работает flexbox

Flexbox — это CSS-модуль для создания гибких макетов, позволяющий легко выравнивать и распределять элементы внутри контейнера.

Основные свойства:

• display: flex — включает flex-контейнер.
• flex-direction — задаёт направление (row, column, row-reverse, column-reverse).
• justify-content — выравнивает элементы по главной оси (start, end, center, space-between, space-around).
• align-items — выравнивает по поперечной оси (stretch, flex-start, flex-end, center, baseline).
• flex-wrap — разрешает перенос элементов (nowrap, wrap, wrap-reverse).

Пример:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.item {
  flex: 1; /* Равномерное распределение */
}

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