Что означает flex: 1?

Question

Accepted Answer

## Расшифровка шортката

`flex: 1` обычно эквивалентен `flex: 1 1 0%` (в современных браузерах по спецификации для одного значения `flex-grow`): расти, мочь сжиматься, базис 0 — свободное место делится поровну.

```css
.row { display: flex; }
.row > * { flex: 1; } /* равные колонки */
.main { flex: 1; }    /* забрать оставшееся рядом с сайдбаром */
```

Сравните с `flex: auto` (`1 1 auto`) — базис от контента/width. `flex: none` — `0 0 auto`, не растёт и не сжимается.

## Итог

`flex: 1` — «заполни доступное пространство»; понимайте тройку grow/shrink/basis, а не магическое число.