Генератор Flexbox
Настройте контейнер Flexbox вживую и скопируйте готовый CSS.
- Мгновенно
- Бесплатно
- Приватно (обработка локально)
- Без регистрации
Освойте Flexbox без догадок
Выберите направление, выравнивание, перенос и отступ: предпросмотр обновляется вживую, а CSS контейнера готов к копированию.
-
Задайте свойства
direction, justify, align, wrap, gap.
-
Смотрите предпросмотр
Пронумерованные элементы реагируют вживую.
-
Скопируйте CSS
Примените к контейнеру.
CSS контейнера
| Свойство | Роль |
|---|---|
| display: flex | Включает Flexbox |
| flex-direction | Строка или колонка |
| justify-content | Распределение (главная ось) |
| align-items | Выравнивание (поперечная ось) |
| gap | Промежуток между элементами |
CSS применяется к родителю; дети располагаются сами. Всё генерируется в браузере.
Частые вопросы
Зачем нужен Flexbox?
Flexbox — это режим раскладки CSS для выравнивания и распределения элементов в строке или колонке. Он автоматически управляет отступами, центрированием и переносом, сильно упрощая адаптивные макеты.
В чём разница justify-content и align-items?
justify-content распределяет элементы по главной оси (горизонтальной при row), align-items выравнивает по поперечной (вертикальной при row). При column обе оси меняются местами.
Сгенерированный CSS — для контейнера или элементов?
Для контейнера. Свойства (display: flex, justify-content и т. д.) ставятся на родителя; дети позиционируются сами. Предпросмотр показывает пронумерованные элементы.
Что делает flex-wrap?
По умолчанию (nowrap) элементы остаются в одной строке, сжимаясь при необходимости. С wrap они переносятся на следующую строку при нехватке места — удобно для гибких сеток.