Генератор CSS Flexbox (визуальный)

Генератор CSS Flexbox (визуальный)

Создайте визуальные флекс-макеты и скопируйте готовый CSS. Настройте направление, выравнивание, перенос, зазор и отдельные настройки элементов, при этом в реальном времени обновляется предварительный просмотр. Никаких догадок, никаких поездок в Chrome DevTools — просто выберите нужное поведение контейнера, посмотрите, как оно отображается, и скопируйте сгенерированные правила.

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

1. Выберите flex-direction (строка, строка-обратная, столбец, столбец-обратный) для установки основной оси.
2. Выбрать justify-content и align-items для того, как дети выстраиваются вдоль каждой оси.
3. Включить flex-wrap если элементы должны переноситься на новую строку — align-content появится для управления несколькими строками.
4. Установите gap в пикселях для размещения элементов без отступов.
5. Изменить количество элементов для добавления или удаления дочерних элементов флекс-контейнера (1–12).
6. Нажмите на любой элемент в предварительном просмотре, чтобы открыть редактор элемента и настроить flex-grow, flex-shrink, flex-basis, align-self, или order.
7. Скопируйте сгенерированный CSS и вставьте его в свой стиль.

Возможности

• Режим визуального предварительного просмотра — Увидите, как контейнер и элементы перестраиваются мгновенно при изменении свойств.
• Полный контроль над контейнером — направление, выравнивание, выравнивание по оси, перенос, выравнивание по оси и зазор.
• Отдельные настройки элементов — Нажмите на элемент, чтобы изменить flex-grow, flex-shrink, flex-basis, align-self и order, не перебирая в DevTools.
• Динамическое количество элементов — Добавляйте или удаляйте дочерние элементы от 1 до 12, чтобы соответствовать вашему реальному интерфейсу.
• Чистый вывод CSS — Генерируются селекторы контейнера и отдельных элементов в виде аккуратного, готового к копированию фрагмента.
• Работает полностью в браузере — Нет загрузки, нет круговых передач данных; ваша настройка никогда не покидает страницу.