Flex-контейнер и flex-элементы

Flex-контейнер — элемент с display: flex, а flex-элементы — его прямые потомки, которые получают специальное поведение по оси.

Зачем нужно

Понимание разделения на контейнер и элементы — ключ к Flexbox. Свойства контейнера управляют раскладкой всех потомков (justify-content, align-items, flex-direction), а свойства элементов — поведением каждого в отдельности (flex-grow, align-self, order). Путаница этих уровней — главная причина ошибок.

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

  • Любой flex-layout: navbar, grid карточек, форма
  • Управление распределением пространства
  • Выравнивание и порядок элементов

Основной контент

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

.container {
  display: flex;               /* или inline-flex */

  /* Ось и перенос */
  flex-direction: row;         /* row | row-reverse | column | column-reverse */
  flex-wrap: nowrap;           /* nowrap | wrap | wrap-reverse */
  flex-flow: row wrap;         /* шортхенд direction + wrap */

  /* Распределение по главной оси */
  justify-content: flex-start; /* flex-start | flex-end | center |
                                  space-between | space-around | space-evenly */

  /* Выравнивание по поперечной оси */
  align-items: stretch;        /* stretch | flex-start | flex-end |
                                  center | baseline */

  /* Выравнивание рядов (при flex-wrap: wrap) */
  align-content: stretch;      /* те же значения + space-between/around */

  /* Отступы между элементами */
  gap: 16px;
  gap: 16px 24px;              /* row-gap column-gap */
}

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

.item {
  /* Рост: занимает долю свободного пространства */
  flex-grow: 0;    /* 0 = не растёт (default) */
  flex-grow: 1;    /* занимает всё свободное место */

  /* Сжатие: при нехватке места */
  flex-shrink: 1;  /* 1 = сжимается (default) */
  flex-shrink: 0;  /* запретить сжатие */

  /* Базовый размер */
  flex-basis: auto;  /* auto | 0 | 200px | 30% */

  /* Шортхенд: grow shrink basis */
  flex: 0 1 auto;    /* default */
  flex: 1;           /* = flex: 1 1 0 */
  flex: 1 1 auto;
  flex: none;        /* = flex: 0 0 auto */

  /* Порядок (без изменения HTML) */
  order: 0;          /* default; меньше = раньше */

  /* Переопределить align-items для этого элемента */
  align-self: auto;  /* auto | flex-start | flex-end | center | stretch | baseline */
}

Визуализация flex-grow

/* Два элемента делят пространство */
.item-a { flex: 1; } /* 1/(1+2) = 33% */
.item-b { flex: 2; } /* 2/(1+2) = 66% */

/* Один растёт, остальные фиксированы */
.sidebar { width: 280px; flex-shrink: 0; }
.main    { flex: 1; }

HTML-структура

<div class="container">   <!-- flex-контейнер -->
  <div class="item">A</div>  <!-- flex-элемент -->
  <div class="item">         <!-- flex-элемент -->
    <span>вложен</span>      <!-- НЕ flex-элемент -->
  </div>
  <div class="item">C</div>  <!-- flex-элемент -->
</div>

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

  • Применение flex-свойств не на тот элемент — justify-content на .item вместо .container не работает
  • flex: 1 и flex-basis: 0 — flex: 1 означает flex: 1 1 0, а не flex: 1 1 auto; это важно при расчёте равных колонок
  • align-content vs align-items — align-items для одного ряда, align-content для нескольких рядов (при flex-wrap)
  • order нарушает tab-порядок — визуальный порядок через order не совпадает с DOM-порядком для скринридеров и клавиатурной навигации

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

Ресурсы