Онлайн конструктор Flexbox с настройкой свойств и экспортом кода

Генератор Flexbox

Интерактивный инструмент для создания Flexbox раскладок с визуальным предпросмотром. Есть подсказки осей main/cross, раздельные row-gap/column-gap и режим drag & drop для визуального изменения порядка (order) с генерацией nth-child.

Настройки
Flex-контейнер
основные свойства
Заметно при wrap и нескольких рядах
gap (px), 0…80
0…80
Оси
подсказки main/cross
Размер контейнера (для демо)
если пусто — auto
Элементы
кол-во, размеры, flex
1…40
число + unit или auto
Drag & Drop порядок
перетащите элементы в предпросмотре
Точечные настройки элемента
order/align-self для одного блока
Предпросмотр
CSS
контейнер + элементы + nth-child
HTML
простая разметка