↔️
免费 CSS Flexbox 生成器
在实时项目上尝试 flex 方向、换行、主轴对齐和交叉轴对齐 — 并复制 CSS。
加载后可离线使用
一个可视化 flexbox 练习场：设置方向、换行、justify-content、align-items 和间隙，更改项目数，并点击项目为其设置 flex-grow。CSS 实时更新，可直接复制。
预设
提示：点击预览中的项目以在其上切换 flex-grow: 1。
实时预览
css
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>🔒 一切都在浏览器中运行 — 不会上传任何内容。
工作原理
交互式 flexbox 练习场：切换 flex-direction、wrap、justify-content 和 align-items，观察最多 10 个实时项目即时重新排列。点击任意项目为其设置 flex-grow: 1，看看它如何占据空间。CSS 实时更新，可直接复制到你的项目中。
- 1设置容器方向、换行、justify-content、align-items、间距。
- 2添加项目一到十个带编号的 flex 项目。
- 3动手实验点击项目切换 flex-grow，查看效果。
- 4复制 CSS容器（和项目）规则，可直接粘贴。
一切都在你的浏览器中运行——不会上传任何内容。