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] 这样的任意值。
相关工具
CSS Grid 演练场
可视化选择 grid-template-columns / rows、gap 与项目对齐——CSS 直接复制到项目。
开发 0 0
CSS 滤镜演练场
可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。
颜色 0 0
CSS 动画生成器
可视化构建 CSS 动画 — 选预设、调时间/缓动/次数、看预览、复制 keyframes。
开发 0 0
CSS clip-path 构建器 (圆、椭圆、多边形、Inset)
CSS `clip-path` 属性可视构建器 — 选择形状 (圆、椭圆、inset、多边形)、用滑块调整数值或点击预览添加多边形顶点、复制即用 CSS 声明。内置 10 种形状预设 (三角形、六边形、星形、箭头、对话气泡、十字等)。
颜色 0 0
Cron 表达式构建器
点击式构建 cron 表达式——每小时 / 每天 / 每周 / 每月 / 完全自定义——与 Cron 解释器配套。
开发 0 0
不可见 / 零宽字符检测
在粘贴文本中识别 NBSP、零宽字符、双向标记与制表符——并一键清理。
开发 0 0