CSS Flexbox 演练场

功能特性

容器属性面板

自由增删子项

每个子项单独设置

布局实时预览

生成 CSS 代码

使用方法

1. 调整容器属性（direction、wrap、justify-content、align-items）。

2. 添加或移除 flex 子项。

3. 查看布局实时变化并复制 CSS。

关于这个工具

Flexbox 沿一条轴线——行或列——排列元素，并在它们之间分配空间。难点在于几个属性会相互影响：flex-direction 决定主轴，justify-content 沿主轴对齐，align-items 沿交叉轴对齐，flex-wrap 决定是否换行，gap 设置统一间距。在这个练习场里修改任一属性，彩色方块就会立即重新排列，这是建立直觉或排查布局问题最快的方式。改变子元素数量可以测试换行效果，然后复制生成的容器 CSS。如果需要行和列同时对齐的二维布局，CSS Grid 通常是更合适的工具。

常见问题

justify-content 和 align-items 有什么区别？

justify-content 沿 flex-direction 设定的主轴分配元素，align-items 在交叉轴上定位元素。在行方向中，justify-content 管水平、align-items 管垂直；在列方向中两者的作用互换。

为什么 justify-content 好像没有效果？

只有主轴上有剩余空间时它才起作用。如果子元素已经占满容器，例如设置了 flex: 1 或很大的宽度，就没有空间可分配了。

什么时候该用 gap 而不是 margin？

gap 只在元素之间添加间距，不会加在外侧边缘，而且对行和换行后的每一行都有效。它比 margin 更简单、更可预测，所有现代浏览器都支持在 flexbox 中使用。

flex-wrap 会改变什么？

nowrap 时元素保持在一行，必要时会被压缩；wrap 时空间不足的元素会移到新的一行；wrap-reverse 会按相反方向堆叠这些行。

该用 Flexbox 还是 Grid？

导航栏、按钮组、内容居中这类一维排列用 Flexbox；卡片画廊、页面布局这类需要行列同时对齐的场景用 Grid。

功能特性

使用方法

关于这个工具

常见问题

相关工具