flex

Пример

Боковая колонка фиксированной ширины, основная забирает всё остальное:

<div class="layout">
  <aside class="layout__side">Меню</aside>
  <main class="layout__main">Основное содержимое</main>
</div>

.layout {
  display: flex;
  gap: 1rem;
}

.layout__side {
  flex: 0 0 8rem;
  padding: 1rem;
  background: #eef;
}

.layout__main {
  flex: 1;
  padding: 1rem;
  border: 1px solid;
}

Синтаксис

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

Начальное значение

0 1 auto

Применяется к

флекс-элементам

Наследуется

нет

Анимируется

как у отдельных свойств flex-grow, flex-shrink и flex-basis

Вычисляемое значение

как у отдельных свойств

flex — сокращение для трёх свойств, в этом порядке:

1. flex-grow — во сколько раз элемент растёт, когда есть свободное место;
2. flex-shrink — во сколько раз сжимается, когда места не хватает;
3. flex-basis — размер, от которого элемент начинает расти или сжиматься.

Значения

initial (0 1 auto)

Не растёт, может сжиматься, стартовый размер — по width или содержимому. Так ведут себя флекс-элементы по умолчанию.

auto (1 1 auto)

Растёт и сжимается от своего естественного размера. Крупное содержимое получает больше места.

none (0 0 auto)

Не растёт и не сжимается — жёсткий размер.

Одно число, например 1 (1 1 0%)

Растёт с коэффициентом 1 от нулевого стартового размера: свободное место делится пропорционально числам, независимо от содержимого. flex: 2 получит вдвое больше, чем flex: 1.

Три значения, например 0 0 12rem

Полная запись: рост, сжатие и стартовый размер.

Как понять

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

Главное различие — flex: 1 и flex: auto. С flex: 1 колонки получаются одинаковыми, потому что стартуют с нуля. С flex: auto колонка с длинным текстом будет шире, потому что стартует со своего содержимого.

Примеры

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

<div class="row">
  <div>Коротко</div>
  <div>Здесь гораздо более длинный текст</div>
  <div>Средне</div>
</div>

.row {
  display: flex;
  gap: 0.5rem;
}

.row div {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid;
}

Колонки по содержимому

Та же разметка с flex: auto — длинный текст забирает больше места:

<div class="row">
  <div>Коротко</div>
  <div>Здесь гораздо более длинный текст</div>
  <div>Средне</div>
</div>

.row {
  display: flex;
  gap: 0.5rem;
}

.row div {
  flex: auto;
  padding: 0.5rem;
  border: 1px solid;
}

Карточки с переносом

flex: 1 1 12rem и flex-wrap: wrap: карточки не уже 12rem, лишние переносятся на новую строку и растягиваются:

<ul class="cards">
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
  <li>Пять</li>
</ul>

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.cards li {
  flex: 1 1 12rem;
  padding: 1rem;
  border: 1px solid;
}

Подсказки

• flex действует только на прямых детей флекс-контейнера. У обычного блока свойство ничего не делает.
• Флекс-элемент по умолчанию не сжимается уже своего самого длинного слова (min-width: auto). Если длинная строка ломает раскладку, добавьте элементу min-width: 0.
• Лучше писать сокращение flex, а не отдельные свойства: оно выставляет разумные значения для всех трёх сразу.
• Для раскладки в две оси — строки и колонки одновременно — удобнее сетка (display: grid).