Flexbox 编辑器
免费在线 Flexbox 布局编辑器，可视化实时预览
Flexbox 属性参考
flex-direction: row | column | row-reverse | column-reverse。justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly。align-items: stretch | flex-start | center | flex-end | baseline。flex-wrap: nowrap | wrap。gap: 项目之间的间距。
如何使用 Flexbox 编辑器
使用控件调整 flex 容器属性。预览实时显示项目的排列方式。添加或删除项目以测试不同配置。复制生成的 CSS 用于你的项目。
▶justify-content 和 align-items 有什么区别？
justify-content 控制沿主轴的对齐（行方向为水平，列方向为垂直）。align-items 控制沿交叉轴的对齐（与主轴垂直）。
▶如何用 Flexbox 居中元素？
将父元素设置为 display: flex; justify-content: center; align-items: center; 即可将子元素水平和垂直居中。
▶flex-wrap 有什么作用？
默认情况下，flex 项目尝试放在一行（nowrap）。设置 flex-wrap: wrap 允许项目在空间不足时换行到下一行。