Главное
Три свойства задают, как flex-item делит свободное (или недостающее) пространство по главной оси. Shorthand: flex: <grow> <shrink> <basis>.
| Свойство | Роль |
|---|
flex-basis | стартовый размер до grow/shrink (auto, 0, длина, %) |
flex-grow | доля свободного места (если сумма basis < контейнера) |
flex-shrink | доля сжатия (если сумма basis > контейнера) |
.item { flex: 1 1 0; }
.aside { flex: 0 0 240px; }
.main { flex: 1 1 auto; }
flex: 1 обычно значит 1 1 0% (зависит от браузера/спеки shorthand) — на собесе уточняют разницу flex: 1 vs flex: auto (1 1 auto).
