flex-grow, flex-shrink и flex-basis
Вопрос
Объясни, как работают flex-grow, flex-shrink и flex-basis. Что значит flex: 1?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
basis: стартовый размер по главной оси
grow: доля свободного места, которую элемент забирает (по умолчанию 0)
shrink: насколько сжимается при нехватке места (по умолчанию 1), сжатие пропорционально basis
`flex: 1` это `1 1 0%`, все делят место строго по коэффициентам
`flex: auto` это `1 1 auto`, размер от содержимого плюс доля остатка
Минимальный размер `min-width: auto` мешает сжатию, лечится `min-width: 0`
Что могут спросить следом
- Чем
flex: 1отличается отflex-grow: 1? - Что значит
flex: none? - Почему элемент не сжимается меньше текста?
Разбор
Браузер сначала даёт каждому элементу стартовый размер flex-basis: при auto это width или размер содержимого. Затем считает, сколько места осталось. Если место есть, его делят по flex-grow: элемент с 2 получает вдвое больше, чем с 1, а с 0 не растёт вовсе, это значение по умолчанию. Если места не хватает, элементы сжимаются по flex-shrink, причём сжатие взвешено по basis, большие теряют больше. По умолчанию shrink равен 1. flex: 1 раскрывается в 1 1 0%: стартовый размер ноль, поэтому всё место делится строго по коэффициентам и колонки равны. Этим он отличается от просто flex-grow: 1, где basis остаётся auto. Есть ловушка: у flex-элемента min-width: auto, и он не сожмётся меньше длинного слова; лечится min-width: 0.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.