Коротко: flex: 1 1 0 — это сокращение трёх свойств: flex-grow: 1 (растягиваться), flex-shrink: 1 (сжиматься), flex-basis: 0 (базовая ширина ноль). Вместе это означает: «элемент делит место поровну с соседями, у которых та же настройка». Именно так делают равные колонки.
flex: 1 1 0 встречается в чужом коде и в документации. Без понимания трёх составляющих непонятно, почему элементы получаются одинаковыми или, наоборот, разной ширины.Три числа: что означает каждое
| Значение | Свойство | Смысл |
|---|---|---|
первое — 1 |
flex-grow |
как сильно растягиваться |
второе — 1 |
flex-shrink |
как сильно сжиматься |
третье — 0 |
flex-basis |
базовая ширина (0 — по содержимому) |
Вкладки: варианты flex-записи
.col { flex: 1 1 0; }Базовая ширина ноль, обе колонки растут одинаково — получаются строго равные части. Идеально для одинаковых колонок и «резинки» в строке.
.col { flex: 1 1 auto; }Базовая ширина — по содержимому. Колонки растянутся, но ширина зависит от контента: одна с длинным текстом будет шире.
.col { flex: 1; } /* = 1 1 0 */Короткая запись. Современные браузеры понимают её как 1 1 0 (значение basis — 0%).
.sidebar { flex: none; width: 280px; }«Не растягиваться и не сжиматься» — фиксированный блок. Удобно для сайдбара с заданной шириной.
flex-basis: 0 обнуляет «стартовую» ширину. Тогда всё свободное место делится поровну, независимо от количества текста в колонке. Поэтому flex: 1 1 0 даёт ровные колонки.Практика: равные колонки
- Контейнеру задайте
display: flex; gap: 16px;. - Каждой колонке —
flex: 1 1 0;. - Проверьте: колонки одинаковой ширины независимо от текста.
- Если нужна колонка шире — увеличьте её
flex-grow(например,2 1 0).
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Колонки разной ширины | использован auto в basis |
использовать flex: 1 1 0 |
| Элемент схлопнулся | flex-shrink: 1 и мало места |
задать min-width или flex: none |
| Ряд переносится | нет flex-wrap или мало ширины |
flex-wrap: wrap |
| Длинный текст «рвёт» колонку | нет переноса | min-width: 0 + overflow-wrap |
Проверьте себя
flex-basis: 0?
flex: 1 1 0 отличается от flex: 1 1 auto?
Вопросы и ответы
Это короткая запись, и браузеры понимают её как 1 1 0%. Для читаемости можно писать полную форму.
Увеличьте её flex-grow: например, flex: 2 1 0 напротив flex: 1 1 0 у соседей.
Запрещает элементу сжиматься меньше его базового размера. Удобно для иконок и кнопок в строке.
Flex-basis «сильнее» width в кладке: он задаёт основу до распределения. Если использую width — держите basis в auto.
Итоги
flex: 1 1 0= растягиваться, сжиматься, база ноль.- Для равных колонок это лучший вариант.
autoв basis учитывает содержимое,0— делит поровну.flex: none— фиксированный элемент.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.