Как пользоваться
- Введите Имя класса для контейнера, например toolbar. CSS использует его как селектор класса.
- Выберите flex-direction, flex-wrap и значения выравнивания. Первым в каждом списке стоит начальное значение.
- Задайте Число элементов (от 1 до 12), затем flex-grow, flex-shrink и flex-basis каждого элемента.
- Проверьте Предпросмотр, затем скопируйте CSS в таблицу стилей и поставьте класс на контейнер.
Свойства контейнера
Модуль CSS Flexible Box Layout раскладывает потомков flex-контейнера вдоль главной оси. flex-direction выбирает ось, а flex-wrap решает, могут ли потомки перейти на новую строку. justify-content распределяет их вдоль главной оси, а align-items и align-content размещают их поперёк неё.
- У flex-direction начальное значение row; оно принимает также row-reverse, column и column-reverse.
- У flex-wrap начальное значение nowrap; оно принимает также wrap и wrap-reverse.
- У justify-content начальное значение flex-start, а у align-items и align-content — stretch.
Свойства элементов
Каждый потомок контейнера является элементом, и три его flex-свойства определяют, сколько места он получает. flex-grow по умолчанию равен 0 и забирает свободное место пропорционально множителю. flex-shrink по умолчанию равен 1 и показывает, сколько элемент уступает, когда места мало. flex-basis по умолчанию равен auto, то есть элемент берёт свой собственный размер, а длина или процент задают размер заранее.
flex: flex-grow flex-shrink flex-basis; начальное значение: 0 1 autoЧего инструмент не пишет
- Свойства order, align-self и gap, которые можно добавить к контейнеру или элементу вручную.
- Элементы сверх двенадцатого: инструмент останавливается на 12 элементах, поэтому более длинный список нужно описать правилами вручную.
Пример: панель инструментов с переносом и три элемента
Имя класса — toolbar, flex-wrap — wrap, justify-content — space-between, align-items — center. Первый элемент сохраняет начальные значения, поэтому правила у него нет. Второй растёт, занимая свободное место, с basis 0. Третий сохраняет свой размер, с basis 200px. Инструмент пишет правило только для второго и третьего элементов.
| Элемент | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
Частые вопросы
В чём разница между flex-grow и flex-basis?
flex-basis — это размер, с которого элемент начинает, до того как свободное место распределено. Затем flex-grow определяет, как делится свободное место: пропорционально множителю каждого элемента. Элемент с basis 0 и grow 1 занимает место, которое оставили другие.
Почему у первого элемента в примере нет правила?
Его значения — начальные значения свойств: flex-grow 0, flex-shrink 1 и flex-basis auto. Браузер использует их без правила, поэтому инструмент пишет правило только для элемента, который от них отличается.
Почему align-items по умолчанию равен stretch?
Модуль CSS Flexible Box Layout задаёт align-items начальное значение stretch, поэтому элементы растягиваются по поперечной оси, если вы не выбрали другое значение. Инструмент начинает с того же значения, поэтому CSS совпадает с тем, что браузер делает без объявления.
Почему basis принимает только px, rem, em и проценты?
Это единицы, которые проверяет инструмент. Значение auto и число 0 без единиц тоже принимаются. Другие единицы, например vw, здесь не предлагаются, поэтому, если вашей вёрстке они нужны, запишите их вручную.
Можно ли добавить промежуток между элементами?
Этот инструмент его не добавляет: он пишет пять свойств контейнера и значения flex для элементов. Добавьте gap в правило контейнера вручную, после того как скопируете CSS.
Отправляется ли созданный CSS куда-нибудь?
Нет. Предпросмотр и CSS создаются в вашем браузере. Ничего не сохраняется и не отправляется на наш сервер, поэтому скопируйте CSS до того, как покинете страницу.
Источники
Цифры и текст в последний раз проверены четверг, 12 ноября 2026 г..