关于此工具
CSS Flexbox 演练场是一个交互式编辑器，用于调整弹性容器的主要布局属性。从四个下拉菜单为 flex-direction、justify-content、align-items 和 flex-wrap 选择取值，五个带编号方块的预览会立即重新排列，让你在写任何代码之前就能看到每个属性如何塑造布局。
在预览下方，匹配的 .container 规则会随你操作生成：display: flex 后面跟着你选定的四条声明。一个按钮可把整段代码块复制到剪贴板，随时可粘贴进样式表。这里只暴露这些容器级属性；诸如 flex-grow、order 或 align-self 之类的单项设置不在其列。
一切都在你的浏览器中运行。不上传任何内容，无账户或跟踪，也可离线使用。它是快速建立 flexbox 直觉、或生成一条你随后再手动打磨的初始规则的便捷方式。
常见问题
预览显示什么？
一个弹性容器，里面装着五个带编号的方块，会随你更改 flex-direction、justify-content、align-items 或 flex-wrap 实时重新排列。
生成的 CSS 可以直接用吗？
可以。把生成的 .container 规则直接复制进你的样式表；它包含 display: flex 以及你选定的四个属性。
我可以调整哪些 flexbox 属性？
四个下拉菜单分别控制 flex-direction（row、row-reverse、column、column-reverse）、justify-content（flex-start、flex-end、center、space-between、space-around、space-evenly）、align-items（stretch、flex-start、flex-end、center、baseline）和 flex-wrap（nowrap、wrap、wrap-reverse）。
输出会包含 gap 或单项 flex 设置吗？
不会。复制的规则只含 display: flex 和那四个容器属性。预览中的 8px gap 只是为了间隔，flex-grow、order 或 align-self 之类的项级属性不包含在内。