⬓

CSS Flexbox 布局演练场

在实时预览中调试 flexbox 属性，并复制生成的 CSS。

flex-direction

justify-content

align-items

flex-wrap

结果

输出

关于此工具

调整 flex-direction、justify-content、align-items 和 flex-wrap，即时查看效果，全部在浏览器中完成。

常见问题

预览区显示的是什么？

一个包含五个编号方块的弹性容器，当你修改属性时它们会实时重新排列。

生成的 CSS 可以直接使用吗？

可以，把生成的 .container 规则直接复制到你的样式表中即可。

更多工具