关于此工具
Flexbox 是现代 CSS 布局的支柱，但它的属性在你亲眼看到效果之前很难记住。这个生成器把 flex-direction、justify-content、align-items、flex-wrap 和 gap 变成简单的控件，配上一排真实的项目，只要你改动任何设置它们就会立即重新排列。
这是理解这些属性如何相互作用的最快方式——布局满意后，复制容器 CSS。一切都在你的浏览器中运行。
常见问题
这个工具生成的是容器的 CSS 还是单个子项的 CSS？
它生成的是父容器的 flex 属性（flex-direction、justify-content、align-items、flex-wrap、gap）——不包含像 flex-grow 或 order 这样的单个子项属性。
justify-content 和 align-items 有什么区别？
justify-content 控制主轴方向（row 布局下是水平方向）上的间距分布，而 align-items 控制交叉轴方向（row 布局下是垂直方向）上的对齐方式。
现代项目里使用 flexbox 还需要浏览器前缀吗？
不需要，所有主流现代浏览器都支持不带前缀的 flexbox 属性；老式的 -webkit-box / -ms-flexbox 语法只有十年以上的旧浏览器才需要。
我的布局数据会被上传吗？
不会。预览和生成的 CSS 完全在你的浏览器中运行——不会发送到任何服务器。
为什么 gap 值在一些旧浏览器里不生效？
flex 容器内的 gap 属性从 2021 年之后发布的浏览器才开始支持；如果需要兼容更老的浏览器，请改用子项的 margin 来实现间距。