Генератор CSS Flexbox
Создайте правило контейнера flexbox CSS из элементов управления flex-direction, flex-wrap, justify-content, align-items, align-content и gap — скопируйте готовый блок .container {} в вашу таблицу стилей.
Ввод
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-flexbox-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"flexDirection": "row",
"justifyContent": "space-between",
"alignItems": "center",
"flexWrap": "wrap",
"alignContent": "stretch",
"gap": "16"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-flexbox-generator` tool (CSS Flexbox Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-flexbox-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор CSS Flexbox — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что такое Flexbox?
Flexbox (display: flex) — это модель макета CSS для расположения элементов в одном ряду или столбце, распределения пространства между ними и их выравнивания без использования float или ручного позиционирования. Это выбор по умолчанию для навигационных панелей, панелей инструментов, строк карточек, элементов управления формой и любого макета, где элементы должны выравниваться и совместно использовать пространство предсказуемым образом. Этот инструмент создает контейнерную часть flexbox — правило, которое вы помещаете на родительский элемент, превращая его прямых потомков в flex-элементы.
Свойства, которые генерирует этот инструмент
- 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 — как несколько строк перенесенных элементов распределяются в контейнере. Это имеет видимый эффект только когда
flex-wrapимеет значениеwrapилиwrap-reverse— на одной строке нечего распределять, поэтому инструмент полностью опускает это из CSS, когдаflex-wrapимеет значениеnowrap. - gap — фиксированное расстояние между элементами в пикселях без необходимости добавления полей отдельным потомкам.
Как использовать этот инструмент
- Выберите flex-direction, чтобы установить главную ось вашего макета.
- Установите justify-content и align-items для управления расстоянием и выравниванием вдоль главной и поперечной осей.
- Включите flex-wrap, если вы хотите, чтобы элементы переносились на новые строки вместо переполнения или сжатия — это откроет элемент управления align-content для расстояния между перенесенными строками.
- Перетащите Gap, чтобы установить согласованное расстояние между элементами.
- Скопируйте созданный CSS из поля CSS или загрузите его как файл
.cssи применить класс (или адаптировать селектор) к родительскому элементу вашего flex-контейнера в таблице стилей.
Вывод обновляется мгновенно при изменении любого элемента управления — отдельного шага "генерирования" нет.
FAQ
Почему align-content не появляется в моем CSS?
Он отображается только когда flex-wrap установлен на wrap или wrap-reverse. При nowrap всегда будет только одна строка элементов, поэтому align-content не имеет эффекта согласно спецификации CSS — включение этого было бы просто неиспользуемым кодом, поэтому инструмент опускает его автоматически.
В чем разница между align-items и align-content?
align-items выравнивает элементы в пределах их строки по поперечной оси. align-content выравнивает сами строки, когда их больше одной (то есть когда элементы переносятся) и в контейнере есть дополнительное пространство.
Охватывает ли это свойства отдельных элементов, такие как flex-grow или order?
Нет — этот инструмент сосредоточен на правиле уровня контейнера, которое применяется ко всем потомкам одновременно. Переопределения для отдельных элементов (flex-grow, flex-shrink, flex-basis, align-self, order) устанавливаются отдельно с использованием отдельного правила для каждого потомка (например .item:nth-child(2) { flex-grow: 1; }) непосредственно в вашей таблице стилей.
Нужно ли мне переименовать селектор .container?
Да — .container — это просто заполнитель, чтобы CSS был готов для вставки. Замените его на класс или селектор вашего фактического родительского flex-элемента (например .navbar, #header, .card-list).
Будет ли это работать в каждом браузере?
Да. Flexbox поддерживается без префикса во всех основных браузерах уже много лет, и gap в flex-контейнерах поддерживается во всех современных браузерах.
Конфиденциальность
Всё происходит в вашем браузере. Никогда никакой CSS, значения или параметры, которые вы вводите, не отправляются на сервер — объявление генерируется и обновляется локально по мере ввода.