使用Flexbox实现多列等宽布局最简单，通过设置容器display: flex和子项flex-basis: 0、flex-grow: 1，可让所有列均分容器宽度。flex-basis设为0使项目从零宽度开始，忽略内容大小差异，flex-grow: 1确保剩余空间按比例平均分配。例如三列布局中，即使内容不一，各列仍严格等宽，保持视觉平衡。结合边框、内边距等样式，即可快速构建简洁整齐的响应式多列结构。
实现多列等宽布局，使用 Flexbox 是最简单高效的方式。通过 flex-basis 和 flex-grow 的配合，可以精确控制每个子元素的初始宽度和扩展行为。
基本结构与容器设置
先定义一个 Flex 容器，并将子项设为等宽分布：
.container {display: flex;
}
.item {
flex-basis: 0;
flex-grow: 1;
}
这里关键点是把 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，可确保每列宽度完全相等，不受内容影响。
实际示例：三列等宽布局
列1
列2
列3
CSS：
.container {display: flex;
}
.item {
flex-basis: 0;
flex-grow: 1;
border: 1px solid #ccc;
padding: 16px;
text-align: center;
}
三列将严格等宽，即使某一列内容较多也不会影响布局平衡。
基本上就这些。用好 flex-basis 和 flex-grow，等宽布局不复杂但容易忽略细节。
