CSS Flexbox生成器
使用flex-direction、flex-wrap、justify-content、align-items、align-content和gap控制生成CSS flexbox容器规则——将生成的.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"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-flexbox-generator` tool (CSS Flexbox Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<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布局模型，用于在单行或单列中排列项目，在项目之间分配空间，并无需浮动或手动定位即可对齐项目。它是导航栏、工具栏、卡片行、表单控件以及任何需要项目对齐并以可预测方式共享空间的布局的默认选择。此工具构建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时才有可见效果——在单行上没有什么可以分布，因此当flex-wrap为nowrap时，工具会从CSS中完全省略它。 - 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已在所有主要浏览器中得到无前缀支持多年，flex容器上的gap也在所有现代浏览器中得到支持。
隐私
所有操作都发生在您的浏览器中。您输入的任何CSS、值或设置都不会发送到服务器——声明是在您输入时在本地生成和更新的。