Что такое flex

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

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

• display: flex — включает flex-контекст.
• flex-direction — направление (row, column и др.).
• justify-content — выравнивание по главной оси.
• align-items — выравнивание по поперечной оси.
• flex-grow/shrink/basis — управление размерами элементов.

Пример:

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