Что означает flex: 1 и как работают flex-grow, flex-shrink и flex-basis?

`flex` — сокращение из трёх свойств, которые определяют, как элемент занимает место на главной оси.

Свойства

• `flex-basis` — начальный размер до распределения места (по умолчанию auto).
• `flex-grow` — какую долю свободного места получает элемент (0 — не растёт).
• `flex-shrink` — насколько элемент уменьшается, когда места не хватает (1 — уменьшается, 0 — нет).

Сокращения

.item { flex: 1; }        /* 1 1 0%: растёт и сжимается, базовый размер 0 */
.item { flex: auto; }     /* 1 1 auto: базовый размер по содержимому */
.item { flex: none; }     /* 0 0 auto: фиксированный */
.item { flex: 0 0 200px; }/* ровно 200 px, не меняется */

Пример

.row { display: flex; gap: 16px; }
.sidebar { flex: 0 0 240px; }  /* фиксированная колонка */
.content { flex: 1; }          /* остаток */

flex: 1 делит свободное место поровну, потому что базовый размер у всех равен нулю.

Коротко для собеседования

flex: 1 — это «расти, сжиматься, базовый размер ноль». Для фиксированных блоков используют 0 0 размер.