最轻量可控的方式是给子项设 flex-basis: 100% 并确保父容器为 display: flex 且 flex-wrap: wrap；width: 100% 在 Flex 布局中常因 flex 属性覆盖而失效，无法可靠触发换行。
flex子项换行后占满整行宽度
直接加 flex-basis: 100%，配合 flex-wrap: wrap 容器设置。这是最轻量、最可控的方式，不依赖 width 或 margin 等副作用强的属性。
常见错误是只写 width: 100%，但 Flex 子项的 width 在主轴方向会被 flex 属性覆盖；或者误用 flex: 1，结果和其他项争抢空间，根本不会“独占一行”。
-
flex-basis: 100%让该项在换行前就声明“我需要一整行”，浏览器自然把它推到下一行并撑满 - 必须确保父容器有
display: flex且设置了flex-wrap: wrap（默认是nowrap） - 不需要设
flex-grow: 0或flex-shrink: 0——flex-basis: 100%已隐含不参与主轴伸缩
为什么不用 width: 100%？
width: 100% 在 Flex 布局中常失效，尤其当父容器没设明确宽度、或子项有 flex: 1 / flex: auto 时，它会被重算为内容宽 + 剩余空间分配结果，而不是你期望的“容器宽度”。
更麻烦的是：如果该子项前面还有其他未换行的子项，width: 100% 可能导致它溢出容器（因为 Flex 默认不重新计算换行后的可用宽度）。
- Flex 中
width是初始尺寸参考，不是最终布局依据；flex-basis才是 Flex 轴上的基准尺寸 - 若父容器是响应式宽度（比如
max-width: 800px），flex-basis: 100%会正确跟随，而width: 100%可能在某些浏览器里解析为包含 padding/border 的总宽 - 实测在 Safari 15.6+ 和 Chrome 112+ 中，
flex-basis: 100%换行行为稳定；width: 100%在部分旧版 Edge 下会卡在原行末尾不换
遇到 margin 或 gap 导致错位怎么办？
如果用了 gap 或子项自带 margin，flex-basis: 100% 仍有效，但要注意：它只控制“内容区宽度”，不包含 gap 或外边距。若需严格贴边，得额外处理。
- 容器设
gap: 12px时，换行项实际占据的是 “100% - gap” 的宽度（因为 gap 是容器级间隙，均分在每行两端） - 想让它真正顶满左右边缘？把
gap挪到子项内部（比如用padding模拟），或改用margin控制非换行项之间的间距 - 避免给换行项设
margin-left/right—— 它会直接压缩可用宽度，导致换行后留白
复杂点在于：这个行为在不同 Flex 主轴方向（flex-direction: row vs column）下逻辑一致，但视觉反馈容易混淆。很多人调了半天发现是忘了检查 flex-direction 是否被其他样式覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
