CSS Flexbox 生成器
可视化设置弹性容器的方向、换行、主轴与交叉轴对齐、间距，以及每个项目的伸缩、顺序和自身对齐，实时显示子项并可复制 CSS。
容器
只有当项目换行成多行时，align-content 才会生效。
项目 1
在此选择项目，或在预览中点击它。
预览
拖动预览右下角可调整容器大小。
CSS 代码
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 10px;
}相关工具
查看全部什么是 CSS Flexbox 生成器？
这是一个交互式 Flexbox 练习场：设置容器属性，添加最多 12 个子项，并为每个项目调整 flex-grow、flex-shrink、flex-basis、order 和 align-self。预览应用的正是生成的 CSS。
如何使用 CSS Flexbox 生成器
- 设置容器：flex-direction、flex-wrap、justify-content、align-items、align-content 和 gap。
- 选择预览中显示的“项目数量”。
- 选中一个项目（点击按钮或在预览中点击），并设置 flex-grow、flex-shrink、flex-basis、order 和 align-self。
- 拖动预览的角来调整其大小，看看布局如何响应。
- 复制
.container和.item-n规则的 CSS 代码。
示例
输入
justify-content space-between, gap 16px; item 2: flex-grow 1, order 2, align-self center
输出
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
gap: 16px;
}
.item-2 {
flex: 1 1 auto;
order: 2;
align-self: center;
} 何时使用 CSS Flexbox 生成器
Flexbox 适合一维布局：导航栏、工具栏、按钮组、媒体对象和居中。对于同时包含行和列的二维页面布局，CSS Grid 生成器通常是更好的工具。
CSS Flexbox 生成器 的工作原理
容器总是带有 display: flex，加上 direction、wrap、justify-content 和 align-items。align-content 只在项目可以换行时才写入（对单行没有效果），gap 只在大于 0 时才写入。对于项目，只写入与默认值不同的值：不是 0 1 auto 时写 flex: grow shrink basis，不为 0 时写 order，不是 auto 时写 align-self，规则名为 .item-1、.item-2……无效的 flex-basis 会被标记并忽略。
常见用例
- 水平和垂直居中内容
- 带有靠右项目的导航栏
- 用 flex: 1 实现等宽列
- 可换行的标签或卡片列表
- 用 order 在视觉上重新排序项目
常见问题
为什么我的 CSS 中没有 align-content？
align-content 只用于分配换行的 flex 容器中的各行。在 flex-wrap: nowrap 时只有一行，所以工具把它省略了。
flex: 1 1 auto 是什么意思？
项目可以从其自动尺寸开始放大（1）和缩小（1）。flex-grow 决定多余空间如何在项目之间分配。
order 会影响无障碍吗？
order 只改变视觉顺序。屏幕阅读器和键盘焦点仍然遵循 HTML 源码顺序，所以不要用它来做有意义的重新排序。
推荐的下一步
二维码生成器
免费二维码生成器，支持链接、文本、Wi-Fi 登录信息、联系人名片、邮件、短信和电话号码。可设置纠错级别、尺寸和颜色，并下载 PNG 或 SVG。
JWT 生成器
使用 HS256/384/512、RS、PS、ES 或 EdDSA 创建已签名的 JSON Web Token。可编辑载荷、设置 exp 和 iat、生成密钥或密钥对，全部在浏览器中完成。
代码压缩
在一个工具里压缩 JavaScript（Terser）、CSS（CSSO）、HTML、JSON 或 XML：选择语言、粘贴代码，即可看到节省的字节数。免费，在浏览器中运行。
代码美化
在浏览器中一站式美化 14 种语言的代码，涵盖前端脚本、样式表、标记语言、数据格式、查询语言以及 PHP 和 Python，选择语言和缩进即可。
MAC 地址生成器
生成随机 MAC 地址，并正确设置单播/组播和本地管理位，可选厂商 OUI 前缀，以及冒号、连字符或 Cisco 格式。
条形码生成器
在浏览器中创建 EAN-13、EAN-8、UPC-A、ITF-14、Code 128 和 Code 39 条形码。校验位会自动计算或验证，可下载 PNG 或 SVG。