width: 100%在flex中常失效，是因为默认flex-wrap: nowrap强制子项单行排列；只有启用flex-wrap: wrap后，width: 100%才被解释为占满当前行可用宽度，从而触发换行。
直接给目标子元素设 width: 100% 或 flex-basis: 100%，但前提是父容器必须启用换行——flex-wrap: wrap 是硬性前提，缺它就无效。
为什么只写 width: 100% 常常不生效？
因为 Flex 默认是 flex-wrap: nowrap，此时浏览器会强行把所有子项压在同一行，width: 100% 要么被忽略，要么导致横向溢出或滚动条。只有开启换行后，浏览器才把它理解为“我要占满当前行可用宽度”，从而触发换行行为。
- 父容器没加
flex-wrap: wrap→ 必然失败，不是你代码写错，是模式没切换 - 父容器宽度未定义（比如
width: auto）不影响width: 100%计算，它按内容区宽度算 - 若其他子项用了
flex: 1或flex-grow: 1，它们会抢空间，导致独占项实际宽度不足 100%，建议统一用flex: 0 0 auto
flex-basis: 100% 和 width: 100% 选哪个？
flex-basis 更贴近 Flex 主轴逻辑，尤其在响应式或动态宽度容器中更稳定；width 在旧版 Edge 或 Safari 某些版本下解析可能偏差。两者都需配合 flex-wrap: wrap，但行为细节不同：
-
flex-basis: 100%是 Flex 布局的基准尺寸，不受flex-grow影响（除非显式设了flex-grow: 1） -
width: 100%可能被flex缩写覆盖（如flex: 1会重置flex-basis，间接干扰width） - 实测 Chrome 112+、Safari 15.6+ 中
flex-basis: 100%换行一致性更高
遇到 gap 时怎么避免留白或错位？
如果父容器用了 gap: 12px，而你又给独占项设了 width: 100%，它实际宽度会变成 “100% + gap”，导致撑出容器或意外换行。
- 最稳妥做法：对独占项取消
gap影响，例如加margin: 0 -12px（假设gap: 12px） - 或改用
flex-basis: calc(100% - 12px)，但需确保 CSS 变量已定义，否则计算失败 - 别给独占项设
margin-left/right—— 它会直接压缩可用宽度，换行后左右留白 - Firefox 曾对
gap在flex-direction: column下有渲染 bug，别依赖它控制垂直间距来“辅助换行”
别踩这些坑
order 和 align-self 都不能触发换行。前者只改视觉顺序，后者只调交叉轴对齐；在多行 Flex 中强行用它们“模拟换行”，轻则错位，重则 Safari 渲染异常或旧版 Chrome 错乱。
-
justify-content: center对多行容器的最后一行无效，它只作用于单行内对齐 - 想让独占行左对齐，直接给父容器加
text-align: left（对块级子项有效），或给该子项设margin-left: 0 - 响应式下，
flex-basis: 100%会随容器缩放，但若其他子项用margin-right间隔，独占项也带同样 margin 就可能因像素级误差意外折行
真正起作用的是 flex-wrap: wrap 这个开关，以及子项如何声明自己“需要一整行”。其余都是围绕它做兼容和微调——漏掉这个前提，后面所有样式都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
