.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}Что такое генератор Flexbox?
Генератор Flexbox - это визуальная игровая площадка для гибкой компоновки коробок CSS. Вы устанавливаете свойства контейнера с помощью кнопок и ползунков, смотрите предварительный просмотр в реальном времени, перестраиваете элементы в реальном времени и копируете точную CSS, которую использует предварительный просмотр. Он удаляет догадки из запоминания того, какое свойство что делает, поэтому вы можете построить строку, столбец, центрированную раскладку или оберточную сетку карт без проб и ошибок в инструментах разработки браузера.
Flexbox - это одномерная модель макета: предметы расположены вдоль главной оси и выровнены по поперечной оси. Контейнер пропускает почти все через шесть свойств. flex-direction выбирает главную ось и то, идет ли она вперед или назад. lifference-content распределяет свободное пространство вдоль главной оси. allign-items позиционирует предметы на поперечной оси. flex-wrap решает, переливаются ли предметы на новые линии, а alline-content распределяет эти линии друг от друга, как только включена упаковка. gap добавляет постоянное расстояние между элементами без полей.
Этот инструмент раскрывает все эти свойства в одном месте и показывает результат немедленно. потому что предварительный просмотр отображается с теми же объявлениями, которые появляются в поле вывода, то, что вы видите, это именно то, что вы получаете, когда вы вставляете CSS в вашу таблицу стилей. сгенерированное правило нацелено на класс .container по умолчанию и перечисляет только свойства, которые имеют значение, включая выравнивание-контент только при включенной упаковке, так как это не влияет на одну строку.
Все работает полностью в вашем браузере. нет регистрации, ничего не загружается, и инструмент продолжает работать в автономном режиме после загрузки страницы. Это одинаково полезно в качестве учебного пособия для понимания того, как взаимодействуют свойства flex, и как быстрый способ создать готовый к производству CSS. Измените количество элементов предварительного просмотра, измените размер контейнера в голове и прочитайте объявление, которое обеспечивает нужное выравнивание, будь то панель навигации с пространством между ними или раздел героя, идеально центрированный на обеих осях.
Как использовать генератор Flexbox?
Выберите направление и оберните
Выберите направление гибкости и следует ли элементам наматывать несколько строк.
Установить выравнивание
Отрегулируйте обоснование содержимого по главной оси и выравнивание элементов по перекрестной оси до тех пор, пока предварительный просмотр не будет соответствовать вашему макету.
Интервал между мелодиями
Установите зазор между элементами и, при включении упаковки, содержимое выравнивания, которое разделяет линии.
Скопируйте CSS
Созданное правило обновляется в реальном времени. Скопируйте его в один клик и вставьте в таблицу стилей.
Основные характеристики
Живой превью
Контейнер с образцами элементов мгновенно возвращается при изменении свойств, поэтому вы видите макет перед копированием любого кода
Каждый контейнер
Дисплей управления, гибкое направление, гибкая пленка, обоснование контента, выравнивание элементов, выравнивание контента и зазор от одной панели
То, что вы видите, - это то, что вы получаете
Предварительный просмотр использует те же объявления, что и выходные данные, поэтому скопированный CSS создает именно макет на экране
Чистый, минимальный выход
Сгенерированное правило перечисляет только значимые свойства и опускает содержимое выравнивания до тех пор, пока не будет включена упаковка
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!