Свойство flex: размеры гибких элементов
Как распределять свободное место между элементами Flexbox с помощью flex-grow, shrink и basis.
Как это работает
Сокращённое свойство flex задаётся дочернему элементу flex-контейнера. Оно объединяет готовность расти, готовность сжиматься и исходный размер. Родителю сначала требуется display: flex, иначе эта настройка не управляет раскладкой.
Запись flex: 1 1 0 распределяет свободное пространство между равноправными элементами от нулевой базы. Запись 0 0 180px полезна для фиксированной боковой колонки. Длинное слово может мешать сжатию: для гибкой области иногда нужно min-width: 0.
Пример в интерфейсе
.row { display: flex; gap: 12px; }
.row > div { flex: 1 1 0; min-width: 0; padding: 16px; background: #eaf4ee; }
.row > div:nth-child(2) { flex-grow: 2; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| flex-grow | Доля участия в распределении свободного места. |
| flex-shrink | Готовность сжиматься при нехватке места. |
| flex-basis | Исходный размер по главной оси. |
| flex: none | Эквивалент 0 0 auto. |
На что обратить внимание
flex-grow: 2 не гарантирует ширину ровно вдвое больше соседнего элемента: итог зависит и от базового размера, и от содержимого.
Проверьте на практике
Задайте средней карточке flex: 2 1 0. Затем увеличьте текст в первой и посмотрите, когда понадобятся перенос и min-width.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.