多列等宽布局：Flexbox flex-basis与flex-grow详解

想轻松实现真正等宽、响应式且不受内容长度影响的多列布局？Flexbox 的 flex-basis: 0 与 flex-grow: 1 组合正是最简洁高效的解决方案——它强制所有子项从零宽度起步，再均分剩余空间，彻底规避因文字多少、图片尺寸差异导致的列宽不一问题，配合边框、内边距等基础样式，几行代码就能打造出视觉整齐、结构稳健的现代多列界面。

实现多列等宽布局，使用 Flexbox 是最简单高效的方式。通过 flex-basis 和 flex-grow 的配合，可以精确控制每个子元素的初始宽度和扩展行为。

基本结构与容器设置

先定义一个 Flex 容器，并将子项设为等宽分布：

这里关键点是把 flex-basis 设为 0，表示每个项目从“无宽度”开始；再设置 flex-grow: 1，让所有项目平分剩余空间。这样就能实现真正的等宽效果。

flex-basis 的作用

flex-basis 决定子元素在分配多余空间前的初始主轴尺寸。它可以是像素值、百分比或 auto（默认值）。

• 设为 0 时，忽略内容大小，强制从零开始伸缩
• 设为具体宽度如 200px，则以此为基础进行伸缩
• 设为 auto 时，以内容或 width 属性决定基础宽度

在等宽布局中推荐设为 0，避免因内容不同导致宽度不均。

flex-grow 如何分配空间

flex-grow 定义了子元素的扩展权重。当容器有剩余空间时，按比例分配。

• 所有项目都设为 flex-grow: 1，表示平均分配可用空间
• 若某项目设为 2，其余为 1，则该项目获得双倍空间

结合 flex-basis: 0 和 flex-grow: 1，可确保每列宽度完全相等，不受内容影响。

实际示例：三列等宽布局

CSS：

三列将严格等宽，即使某一列内容较多也不会影响布局平衡。

基本上就这些。用好 flex-basis 和 flex-grow，等宽布局不复杂但容易忽略细节。

今天关于《多列等宽布局：Flexbox flex-basis与flex-grow详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！