怎么用？
拖动下拉与滑块，上方容器实时按当前 flex 属性排列子项；调好点「复制 CSS」拿走。改子项数量可观察换行与对齐变化。
主轴 vs 交叉轴
justify-content 管主轴对齐、align-items 管交叉轴对齐；flex-direction 决定谁是主轴。理解这一点，flex 就通了大半。
关于 chdh.me 在线工具
同类还有 CSS 渐变生成器、border-radius 生成器、box-shadow 生成器，均纯前端运行、不上传、不追踪。
CSS Flex 布局可视化
可视化调 flex-direction / justify-content / align-items / wrap / gap，实时预览并复制容器 CSS。学 flex、调布局利器。纯前端。
1
2
3
4
容器 CSS
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;