不能用 width: 33.33% 实现等宽三栏，因其受 border/padding/margin 影响易溢出，且浏览器对小数舍入不一致导致总和偏差；flex: 1（即 flex-grow: 1, flex-shrink: 1, flex-basis: 0）才能真正按比例均分可用宽度，实现无脑等宽与响应式适配。
为什么不能用 width: 33.33% 实现等宽三栏
直接写 width: 33.33% 看似合理，但实际容易溢出容器：只要子项有 border、padding 或 margin，盒模型就会撑破父容器。更麻烦的是，不同浏览器对小数百分比的舍入精度不一致，三列加起来可能变成 99.99% 或 100.01%，导致最后一列换行或错位。
根本原因在于 width 是绝对尺寸控制，而等宽的本质是「按比例瓜分剩余空间」——这正是 flex 的设计目标。
- 必须给父容器设
display: flex，否则所有flex相关属性无效 - 子项不要同时设
width和flex: 1，后者会覆盖前者，徒增维护困惑 - 记得重置
box-sizing: border-box，避免 padding/border 额外增加宽度
flex: 1 到底做了什么
flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0 的简写。关键在 flex-basis: 0：它让三列初始宽度为 0，然后按比例均分父容器全部可用宽度（不是“剩余”宽度）。所以三列严格等宽，且自动适应容器缩放。
对比 flex: 0 0 33.33% 这种写法——它把 flex-basis 设为固定值，失去弹性，也不再响应容器变化。
立即学习“前端免费学习笔记（深入）”；
- 三列都写
flex: 1，才真正实现「无脑等宽」 - 如果某列内容特别长（比如超长文本），默认会换行；如需强制单行，加
white-space: nowrap - 若其中一列需占两倍宽度，就写
flex: 2，其余仍为flex: 1，比例即生效
常见错误：justify-content 干扰等宽
很多人顺手加 justify-content: space-between 或 space-around，结果发现三列不等宽了。这是因为 justify-content 只控制主轴上的「对齐与间距」，不参与空间分配；但它插入的间隙会挤占子项宽度，间接破坏 flex: 1 的均分逻辑。
要留间隙，正确做法是用 gap（推荐）或子项加 margin：
-
gap: 16px最干净，只作用于 flex 容器内部间隙，不影响 flex 分配 - 若需兼容旧版 Safari（iOS 15.4 以下），改用
row-gap: 16px - 避免用
margin模拟间隙，尤其左右 margin 容易触发父容器 overflow
响应式下三栏变单栏时 flex-wrap 不起作用？
当屏幕变窄，你希望三栏堆叠成一列，但只加 flex-wrap: wrap 不够——因为 flex: 1 仍会让每列尝试占满整行宽度，结果还是三列挤在同一行、文字被压缩甚至溢出。
真正起效的是媒体查询中重置子项的 flex 值：
- 小屏下把
flex: 1改成flex: none或flex: 0 0 100%，强制单列 - 或者直接用
flex-direction: column，但要注意高度是否可控 - 别忘了移除
gap或调小，避免垂直间隙过大
最易忽略的一点：等宽三栏在窄屏下即使视觉上“堆叠”了，如果没显式设置子项宽度，它们仍可能继承 flex 分配逻辑，导致高度不一致或内容错位。动手改，别只靠 flex-wrap 侥幸。
