正确写法是父容器设display: flex，子项统一用flex: 1（等价于flex: 1 1 0），不设width/min-width，避免padding/border干扰；响应式列数变化时靠媒体查询调整flex-basis或改用CSS Grid。
flex布局下多列等宽盒子的正确写法
用 display: flex 实现多列等宽，核心不是靠 width: 25% 这类百分比硬写，而是让子项自动均分容器空间。手动算百分比在响应式场景下极易出错，尤其列数动态变化时。
- 父容器必须设
display: flex，且不设flex-wrap: wrap（除非你真需要换行） - 子项统一用
flex: 1，它等价于flex: 1 1 0，即“放大、缩小、基准宽度为0”，才能真正均分剩余空间 - 避免给子项设固定
width或min-width，否则会挤占其他列的伸缩余地
为什么flex: 1比width: 33.33%更可靠
百分比宽度依赖父容器精确宽度，而实际中常遇到 margin、padding、border 或 box-sizing 不一致导致计算偏差；flex: 1由 flex 引擎内部按剩余空间实时分配，天然规避这些干扰。
- 当父容器有
padding时，width: 33.33%会溢出（因为百分比基于 content-box 宽度），而flex: 1自动扣除 padding 后再均分 - 子项含 border 或 outline 时，
width值不会自动收缩，但flex: 1的伸缩行为会把 border 纳入布局计算 - IE11 对
flex: 1支持良好，但对calc(100% / 3)类表达式兼容性差，容易崩
列数动态变化时怎么保持等宽
列数不固定时，别用 CSS 预设类名（比如 .col-3），改用 JS 控制 flex 值或直接用 CSS grid —— 但如果你坚持用 flex，关键点是：子项不写死数量，只靠 flex: 1 和父容器 justify-content: space-between 或留白控制间距。
- 若需 4 列变 2 列（如响应式断点），只需在媒体查询里改父容器
flex-direction或子项flex-basis，不要改flex: 1 - 避免用
:nth-child给不同子项设不同width，这会破坏等宽逻辑，且维护成本高 - 如果列内容高度差异大，加
align-items: stretch到父容器，防止子项高度塌缩影响视觉对齐
常见错误：flex: 1没生效的几个原因
写了 flex: 1 却还是不等宽？大概率是父容器没触发 flex 上下文，或子项被其他样式劫持了尺寸。
- 父容器缺少
display: flex，或被后代的display: block覆盖（检查 computed style） - 子项设置了
min-width: auto（Chrome 默认值），但某些重置样式库会改成min-width: 0，此时要显式写min-width: 0配合flex: 1 - 子项内嵌了
display: table或float: left元素，会破坏 flex 子项的正常伸缩行为 - 父容器用了
flex-wrap: wrap且子项总宽度超限，此时每行独立均分，不是全局等宽——确认是否真需要换行
等宽的本质是「剩余空间均分」，不是「按比例切分容器宽度」。一旦开始手动干预宽度、最小宽度或盒模型，flex 的自动均分逻辑就很容易被绕过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
