Свойства контейнера

Свойства flex-контейнера управляют направлением, переносом, выравниванием и распределением пространства для всех flex-элементов внутри.

Зачем нужно

Свойства контейнера определяют «правила игры» для всех потомков: куда они выстраиваются, как распределяется свободное место, как элементы выравниваются друг относительно друга.

Где используется

  • Любой flex-layout: навбары, карточки, формы, модалки
  • Управление направлением и переносом
  • Центрирование и распределение пространства
  • Отступы между элементами (gap)

Предпосылки

flex-direction

Задаёт направление главной оси:

.row         { flex-direction: row; }            /* → (по умолчанию) */
.row-reverse { flex-direction: row-reverse; }    /* ← */
.column      { flex-direction: column; }         /* ↓ */
.col-reverse { flex-direction: column-reverse; } /* ↑ */

При column главная ось становится вертикальной — justify-content управляет вертикальным распределением, align-items — горизонтальным.

flex-wrap

Переносить ли элементы на новую строку:

.nowrap       { flex-wrap: nowrap; }       /* Без переноса (default) */
.wrap         { flex-wrap: wrap; }         /* Перенос */
.wrap-reverse { flex-wrap: wrap-reverse; } /* Перенос в обратном порядке */

flex-flow — shorthand

/* flex-flow: direction wrap */
.container {
  flex-flow: row wrap;     /* Строка с переносом */
}
.container {
  flex-flow: column nowrap; /* Колонка без переноса */
}

justify-content

Выравнивание по главной оси:

.start()   { justify-content: flex-start; }    /* |||_____ */
.end()     { justify-content: flex-end; }      /* _____||| */
.center  { justify-content: center; }        /* __|||___ */
.between { justify-content: space-between; } /* |__|__| */
.around  { justify-content: space-around; }  /* _|__|__|_ */
.evenly  { justify-content: space-evenly; }  /* _|_|_|_ */
Значение Поведение
flex-start К началу (по умолчанию)
flex-end К концу
center По центру
space-between Первый — в начале, последний — в конце, между — равные промежутки
space-around Равные промежутки вокруг каждого (крайние = половина внутренних)
space-evenly Все промежутки абсолютно равны

align-items

Выравнивание по поперечной оси:

.stretch  { align-items: stretch; }    /* Растянуть (default) */
.start()    { align-items: flex-start; } /* К началу */
.end()      { align-items: flex-end; }   /* К концу */
.center   { align-items: center; }     /* По центру */
.baseline { align-items: baseline; }   /* По базовой линии текста */

stretch работает, только если элемент не имеет фиксированной высоты (при flex-direction: row) или ширины (при flex-direction: column).

align-content

Выравнивание строк при переносе (flex-wrap: wrap):

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;    /* Строки прижаты к началу */
}

/* Все значения */
.start()   { align-content: flex-start; }
.end()     { align-content: flex-end; }
.center  { align-content: center; }
.between { align-content: space-between; }
.around  { align-content: space-around; }
.evenly  { align-content: space-evenly; }
.stretch { align-content: stretch; } /* Default */

align-content работает только при flex-wrap: wrap и нескольких строках.

gap

Отступы между flex-элементами:

.container {
  display: flex;
  gap: 16px;          /* Равные отступы */
}

.container {
  gap: 20px 16px;      /* row-gap column-gap */
}

/* Отдельные свойства */
.container {
  row-gap: 20px;
  column-gap: 16px;
}

gap — лучшая альтернатива margin для отступов между элементами: не влияет на внешние края контейнера.

place-content — shorthand

/* place-content: align-content justify-content */
.container {
  display: flex;
  flex-wrap: wrap;
  place-content: center space-between;
}

/* Одно значение — для обоих */
.center-all {
  display: flex;
  place-content: center; /* align-content + justify-content: center */
}

Полный пример — навбар

.navbar {
  display: flex;
  justify-content: space-between; /* Logo слева, actions справа */
  align-items: center;            /* Вертикальное центрирование */
  gap: 16px;
  padding: 12px 24px;
  background: #1a1a2e;
}

.navbar__links {
  display: flex;
  gap: 24px;
  align-items: center;
}

.navbar__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

Частые ошибки

  1. Путаница justify-content и align-items при flex-direction: column:

    /* При column: */
justify-content → вертикальное распределение
align-items → горизонтальное выравнивание

  2. align-content без flex-wrap: wrap — не работает на одной строке

  3. gap не поддерживается в старых браузерах — fallback через margin:

    /* Fallback */
.item + .item { margin-left: 16px; }
/* Modern */
.container { gap: 16px; }

  4. stretch не работает при фиксированной высоте — элемент с height: 50px не растянется

Практика

  • Создать навбар с justify-content: space-between
  • Центрировать элементы через justify-content: center + align-items: center
  • Распределить карточки через space-evenly
  • Создать wrap-раскладку с gap и проверить align-content

Связанные темы

Ресурсы