flex: сокращённое свойство

flex — shorthand-свойство flex-элемента, объединяющее flex-grow, flex-shrink и flex-basis в одну декларацию.

Зачем нужно

Писать три отдельных свойства (flex-grow, flex-shrink, flex-basis) громоздко и ошибкоёмко. Shorthand flex позволяет задать поведение элемента одной строкой и при этом имеет удобные ключевые слова (auto, none, 1) для самых распространённых случаев. Браузер также правильно выставляет дефолты, что при раздельной записи легко упустить.

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

  • Равное распределение пространства между элементами: flex: 1
  • Элемент с фиксированным размером без роста и сжатия: flex: none
  • Адаптивные колонки в раскладках

Синтаксис

/* flex: <flex-grow> <flex-shrink> <flex-basis> */
.item {
  flex: 1 1 auto;   /* полная запись */
}

/* Одно число — flex-grow; shrink=1, basis=0% */
.item { flex: 1; }     /* grow=1, shrink=1, basis=0% */
.item { flex: 2; }     /* grow=2, shrink=1, basis=0% */

/* Ключевые слова */
.item { flex: auto; }  /* 1 1 auto  — растёт и сжимается */
.item { flex: none; }  /* 0 0 auto  — не растёт и не сжимается */
.item { flex: initial; } /* 0 1 auto — по умолчанию */

Типичные паттерны

Равные колонки

.columns {
  display: flex;
  gap: 16px;
}
.columns > * {
  flex: 1; /* каждый элемент занимает равную долю */
}

<div class="columns">
  <div>Колонка 1</div>
  <div>Колонка 2</div>
  <div>Колонка 3</div>
</div>

Фиксированный сайдбар + гибкий контент

.layout {
  display: flex;
}
.sidebar {
  flex: 0 0 240px; /* grow=0, shrink=0, basis=240px — не меняется */
}
.content {
  flex: 1; /* занимает оставшееся пространство */
}

Элемент не меняет размер

.badge {
  flex: none; /* 0 0 auto — размер по содержимому, без роста и сжатия */
}

Важно: basis=0% при числовом значении

/* flex: 1 означает flex: 1 1 0% — basis=0%, а не auto */
/* Элементы делят ВСЁ пространство контейнера поровну */
.item { flex: 1; }

/* Если нужно basis=auto — пишите явно */
.item { flex: 1 1 auto; }
/* Элементы делят СВОБОДНОЕ пространство пропорционально */

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

  1. flex: 1 не то же самое, что flex: 1 1 auto — basis отличается: 0% vs auto. При flex: 1 все элементы равного размера; при flex: 1 1 auto — пропорционально контенту плюс равное свободное пространство
  2. flex: none на контейнере — свойство применяется к элементу, а не контейнеру
  3. Забытый display: flex на родителе — flex на элементе без flex-контейнера не работает

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

Ресурсы