Справочник HTML & CSS

flex

Сокращённая запись того, как flex-элемент растёт, сжимается и с какого размера начинает.

Синтаксис

flex: grow shrink basis;

Значения

Параметр	Тип	Описание
1	number	`flex: 1` — делить свободное место поровну (`1 1 0`).
grow shrink basis	values	Три значения: `flex: 1 1 200px`.
none	keyword	Фиксированный размер: не растёт и не сжимается.

Примеры

Элементы делят свободное место пропорционально:

<style>
  .row { display: flex; gap: 8px; }
  .row div { padding: 8px; background: lightskyblue; }
</style>
 
<div class="row">
  <div style="flex: 1;">flex: 1</div>
  <div style="flex: 2;">flex: 2 — twice as wide</div>
  <div>auto</div>
</div>

Карточки шириной примерно от 120px, заполняющие каждый ряд:

<style>
  .cards { display: flex; flex-wrap: wrap; gap: 8px; }
  .cards div { flex: 1 1 120px; padding: 8px; background: palegreen; }
</style>
 
<div class="cards"><div>Anna</div><div>Oleg</div><div>Maria</div><div>Ivan</div></div>

Примечания

flex задаётся элементам, а не контейнеру. flex: 1 — самое частое значение: одинаковые колонки, которые занимают всё свободное место.

См. также

flex-grow — Какую часть свободного места забирает flex-элемент.
flex-shrink — Насколько сжимается flex-элемент, когда места не хватает.
flex-basis — Начальный размер flex-элемента вдоль главной оси до раздачи свободного места.
display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.

Вопросы и ответы по теме

В учебнике

Flex-элементы — Как управлять отдельными элементами во flexbox — flex-grow, flex-shrink, flex-basis, сокращение flex, align-self, order и margin auto.

Спасибо, что читаете!