width: 100%在flex-wrap: wrap下能生效，因浏览器将其解释为“占满当前行可用宽度”，从而尊重换行意图；但默认nowrap下会被压缩或溢出，故flex-wrap: wrap是必要前提。
直接给子项设 width: 100% 就能独占一行，但必须配合 flex-wrap: wrap，否则它会被强行压缩或溢出——这是最简、最稳的方案。
为什么 width: 100% 在 flex 容器里能生效
默认情况下，flex item 的 width 不会覆盖 flex 的弹性计算逻辑；但一旦父容器启用了 flex-wrap: wrap，浏览器就允许子项用显式宽度“声明换行意图”。此时 width: 100% 被解释为“我要占满当前行可用宽度”，而 flex 引擎会尊重这个约束，不再尝试把它和其他项挤在同一行。
-
flex-wrap: nowrap（默认）下，width: 100%可能被忽略或导致横向滚动 - 父容器没设宽度（如
width: auto）时，width: 100%仍有效——它按内容区宽度计算，不是按视口 - 不依赖
flex-basis或flex-grow，避免和其它子项产生拉伸冲突
flex-wrap: wrap 是前提，不是可选项
很多人只加 width: 100% 却没开换行，结果元素被压缩变形或撑破容器。flex 布局中，“换行”不是自动发生的，而是由 flex-wrap 显式开启的模式切换。
- 必须写
display: flex+flex-wrap: wrap到父容器上 - 不能只靠
flex-direction: column替代——那是垂直排列，不是“某一项在水平流中独占一行” - 如果已有其它子项用了
flex: 1或flex-grow: 1，它们会抢空间，导致width: 100%项无法真正撑满，建议统一用flex: 0 0 auto控制行为
常见错误：最后一行居中/右偏，误以为是 width: 100% 没起作用
其实不是它失效了，而是你混用了 justify-content: center 或 space-between。这些属性只管“单行内对齐”，对多行布局里的最后一行毫无影响——它照样按容器宽度居中，哪怕你那个 width: 100% 的项已经独占了一整行。
- 要让该独占行左对齐，直接加
text-align: left到父容器（对块级子项有效） - 若子项是 inline 元素或需要更精确控制，给它自身加
margin-left: 0和margin-right: auto - 别试图用
justify-content: flex-start“修复”最后一行——它对多行 flex 容器无效，这是规范行为，不是 bug
响应式场景下，width: 100% 依然可靠，但要注意 margin 干扰
当其他子项用 margin-right 做间隔时，width: 100% 项若也带同样 margin，可能触发意外换行（比如多出一个像素导致折行）。这不是 width 的问题，而是盒模型叠加的结果。
- 推荐给独占项单独重置边距：
margin: 0或margin: 1rem 0 0 - 如果用
gap替代 margin，width: 100%完全不受影响，更干净 - 在媒体查询中切换列数时，无需改这个项的样式——它始终应占满整行，逻辑不变
真正容易被忽略的是：这个方案只解决“视觉上独占一行”，不改变 DOM 顺序或语义。如果你需要屏幕阅读器优先读到它、或 SEO 要求它出现在 HTML 序列末尾，那得靠真实 DOM 位置，而不是 CSS 换行技巧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
