Генератор флексбоксов

Поэкспериментируйте с направлением изгиба, переносом, выравниванием и выравниванием. Наблюдайте за обновлением макетов элементов в реальном времени, а затем копируйте CSS контейнера.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

Поэкспериментируйте с гибким направлением, переносом, выравниванием и выравниванием — смотрите обновление макетов в реальном времени.
Запускается в вашем браузере
Бесплатное использование

Как пользоваться

Установите гибкое направление и оберните.
Отрегулируйте выравнивание содержимого и выравнивание элементов.
Скопируйте CSS Flexbox.

How this tool works

Установите гибкое направление и оберните.
Отрегулируйте выравнивание содержимого и выравнивание элементов.
Скопируйте CSS Flexbox.

Recommended settings

Сначала используйте параметры по умолчанию, затем при необходимости измените их.

Supported formats

Text / on-page input

File size and limits

Очень сложные многослойные предварительные просмотры могут работать медленнее на старых телефонах.

Privacy

Генераторы цвета и CSS полностью работают в вашем браузере. Предварительный просмотр и преобразование никогда не загружают ваши стили.

Common use cases

Используйте Flexbox Generator, когда вам нужно: экспериментируйте с направлением гибкости, переносом, выравниванием и выравниванием — смотрите, как макеты обновляются в реальном времени.

Troubleshooting

Предварительный просмотр выглядит по-другому после вставки

Проверьте наличие конкурирующих CSS на вашей странице (сбросы, унаследованные цвета). Сначала скопируйте сгенерированное правило в изолированную таблицу стилей.

FAQ

Это загружает мой CSS?

Нет. Генераторы и преобразователи запускаются в вашем браузере с предварительным просмотром в реальном времени.

Нужен ли мне аккаунт?

Нет. Откройте инструмент, настройте элементы управления и скопируйте CSS.