CSS Flexbox 演练场
开发
用点击代替输入来调整每个常见 flex 属性。预览实时更新，让每个取值的含义一目了然，输出框同时给出原生 CSS 规则与对应的 Tailwind 实用类。适合学习模型、调试布局或把正确组合粘贴到项目里。
—
flex-direction
flex-wrap
justify-content
align-items
预览
1
2
3
4
5
CSS
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
Tailwind
flex gap-[8px]
使用方法
- 点击各属性的标签来选取值。
- 调整 gap 与项目数量获得更直观的预览。
- 把 CSS 规则或 Tailwind 类复制到项目中。
常见问题
- justify-content 与 align-items 区别？
- justify-content 沿主轴（容器流动方向）对齐，align-items 沿交叉轴对齐。将 direction 改为 column 时可看到它们视觉上互换。
- 为何 align-items: stretch 让项目铺满？
- stretch 为默认值。它让没有显式交叉轴尺寸的项目铺满可用空间。改成其他 align 值会让项目收缩到内容大小。
- flex-wrap 何时起作用？
- 当项目无法在一行容纳时。wrap 会换行，nowrap（默认）会压缩或溢出容器。
- 为什么 Tailwind 类是任意值？
- 多数 flex 属性都有专门类（flex、justify-center、items-center、gap-2）。自定义 gap（如 8px、12px）则使用 gap-[8px] 这样的任意值。