等宽 Flexbox 列 — CSS 生成器
直观地构建 CSS Flexbox 布局：flex-direction、justify-content、align-items、flex-wrap 和容器上的间隙，以及每个子项的 flex-grow、flex-shrink 和 flex-basis，所有这些都具有实时预览和可复制的 CSS。
处理中...
0%
结果
此页面将打开带有 flex-grow: 1 的生成器，该生成器已在所有三个预览框中设置。观察它们：每个框都没有缩小以适应其内容，而是声明了行中剩余空间的相同份额，这就是等宽灵活列的全部秘诀 - 没有百分比宽度，没有 calc()，没有固定的像素数学来保持同步。
flex-grow: 1 告诉子级增长，并将其设置在行中的每个子级上意味着它们都以相同的量增长，因此无论有多少个子级或其中包含什么内容，它们最终都会具有相同的宽度。添加或删除带有下面控件的框，其余列会立即重新分配以保持相等 - 在生产中调整此布局上的浏览器窗口大小，其行为方式相同。
这是等高卡片网格、定价表列和均匀分割的页脚部分背后的模式。通过将其 flex-grow 提高到其他列上方来为一列提供更多空间，或者复制下面的 CSS 块，以实现干净的均等分割。