Глоссарий

Flexbox (CSS)

Flexbox (Flexible Box Layout) — CSS-модель раскладки для выравнивания элементов в одну строку или столбец. Решает классические задачи вёрстки: вертикальное центрирование, равномерное распределение, адаптивные навбары.

Основные свойства контейнера

.container {
  display: flex;
  flex-direction: row | column;        /* ось */
  justify-content: flex-start | center | space-between | space-around;
  align-items: stretch | center | flex-start | flex-end;
  flex-wrap: nowrap | wrap;            /* перенос на новую строку */
  gap: 16px;                           /* отступы между элементами */
}

Свойства элементов

.item {
  flex: 1;           /* grow + shrink + basis = равномерное распределение */
  flex-grow: 2;      /* занимать вдвое больше свободного места */
  align-self: center; /* индивидуальное выравнивание */
  order: -1;         /* изменить порядок без изменения HTML */
}

Flexbox vs Grid

Flexbox — одномерный (строка ИЛИ столбец). CSS Grid — двумерный (строки И столбцы одновременно). Для навбара и карточек — Flexbox. Для сложных страничных раскладок — Grid.