Расставляйте элементы, настраивайте выравнивание и распределение пространства, а генератор мгновенно покажет результат и предоставит готовый CSS-код. Больше не нужно гадать, какой параметр отвечает за что.
Предпросмотр
Управление элементами
Добавить Удалить
Текст элемента
Настройки Flexbox
Направление (flex-direction)
row (горизонтально)
row-reverse (горизонтально обратное)
column (вертикально)
column-reverse (вертикально обратное)
Выравнивание по главной оси (justify-content)
flex-start (в начале)
flex-end (в конце)
center (по центру)
space-between (между)
space-around (вокруг)
space-evenly (равномерно)
Выравнивание по поперечной оси (align-items)
stretch (растянуть)
flex-start (в начале)
flex-end (в конце)
center (по центру)
baseline (по базовой линии)
Перенос элементов (flex-wrap)
nowrap (без переноса)
wrap (с переносом)
wrap-reverse (с переносом обратным)
Выравнивание строк (align-content)
stretch (растянуть)
flex-start (в начале)
flex-end (в конце)
center (по центру)
space-between (между)
space-around (вокруг)
Сгенерировать CSS код
