Генератор CSS flexbox
Визуально создавайте flex-контейнер и его элементы, затем скопируйте CSS, классы Tailwind или встроенный стиль.
Генератор CSS flexbox
Устанавливайте flex-direction, flex-wrap, justify-content, align-items и align-content с помощью раскрывающихся меню, добавляйте промежуток в любой единице, и этот инструмент напишет правило flex-контейнера за вас — вместе с соответствующим правилом для его элементов и небольшим текстовым предпросмотром, показывающим, как выстраиваются блоки. Используйте его для создания навигационной панели, строки карточек, панели инструментов формы или любого макета, которому требуется распределение, центрирование или перенос элементов без использования полной сетки.
Элементы управления элементов применяют flex-grow, flex-shrink и flex-basis равномерно ко всему выбранному количеству элементов, что соответствует тому, как работают большинство реальных flex-строк: один класс элемента управляет несколькими блоками вместо индивидуальных значений для каждого блока. Align-content появляется в выходных данных только тогда, когда flex-wrap установлен на wrap или wrap-reverse, поскольку браузеры игнорируют его в противном случае — инструмент никогда не выводит объявление, которое ничего не делает.
Выбирайте формат выходных данных, соответствующий вашему способу разработки: обычный CSS для таблицы стилей, утилиты Tailwind (скобки произвольных значений охватывают промежутки и базы, которые не находятся на шкале расстояния по умолчанию), или встроенный атрибут стиля для быстрого прототипирования или безопасной разметки электронной почты. Каждое значение обновляется в момент изменения опции, и предпросмотр макета перерисовывается — никаких этапов сборки, никакого внешнего CSS для загрузки.
Все работает локально в вашем браузере; ничто из того, что вы конфигурируете здесь, не отправляется никуда. Когда CSS выглядит правильно, скопируйте его, загрузите как .txt файл или отправьте обратно в ввод, чтобы продолжить итерацию с помощью другого инструмента.