CSS Flexbox 生成器
直观地构建 CSS Flexbox 布局：flex-direction、justify-content、align-items、flex-wrap 和容器上的间隙，以及每个子项的 flex-grow、flex-shrink 和 flex-basis，所有这些都具有实时预览和可复制的 CSS。
结果
Flexbox 布局有两个独立的规则手册 - 容器上的属性（flex-direction、justify-content、align-items、flex-wrap、gap）和每个子元素的属性（flex-grow、flex-shrink、flex-basis） - 并且将它们混合在一起是“为什么这不是按照我期望的方式居中/生长/包装”错误的最常见来源。该生成器将两个规则手册同时显示在屏幕上：更改任何容器控件或任何子级自己的字段，三个编号、颜色编码的框会立即更新，因此因果关系保持可见。
容器侧覆盖每个布局轴：选择一个方向，选择子项如何使用 justify-content 沿着主轴分布，在交叉轴上对齐它们，决定它们是否换行，并在它们之间设置间隙而不是边距黑客。子端也一样真实：添加最多八个框，删除两个框，并为它们中的任何一个提供自己的 flex-grow、flex-shrink 和 flex-basis - 当至少其中一个与浏览器默认值不同时，生成器仅打印每个子 CSS 规则，因此复制的代码永远不会在不需要它的框上使用 flex-grow: 0 填充自身。
预设页面直接跳转到人们实际按名称搜索的布局：如何使 div 居中（最常被问到的 CSS 布局问题，通过 justify-content 和align-items 都设置为居中来解决）、logo-left links-right 导航栏、通过 flex-grow 的等宽灵活列，以及 space- Between 与其近亲 space-around 和 space-evenly 的并排比较。
与该网站上的每个工具一样，该生成器是免费的，并且完全在您的浏览器中运行：无需上传，无需帐户，并且一旦页面加载，它就可以离线工作。