flex-basis: 100% 并非换行机制，而是强制子项独占一行、破坏流式布局的副作用；真正可控换行需依赖 flex-wrap: wrap 配合合理 flex-basis（如 calc(33.333% - gap)）、min-width 及 gap。
flex-basis: 100% 不是“强制换行”，而是“强制单列”
加一个 width: 100% 的空 <div> 来“打断”布局，本质上是在模拟 <code>flex-basis: 100% 的副作用——它会让该子项独占一行，但**不是换行控制机制，而是破坏了 flex 流式分配逻辑的结果**。浏览器看到这个 100% 宽的项，立刻拒绝给后续兄弟留空间，于是后者被迫下一行。这不是可控的换行，是布局断裂。
- 它无法响应容器缩放：屏幕变窄时，这个“换行点”仍卡死在 100%，可能造成多余空白或错位
- 语义污染：插入无意义的
<div> 违反 HTML 结构意图，增加可访问性负担（如屏幕阅读器会读出空元素）<li>维护脆弱：一旦后续样式加了 <code>flex-grow: 1或min-width，这个“换行 div”可能被压缩、拉伸甚至消失 - 父容器必须设
display: flex和flex-wrap: wrap - 子元素推荐用
flex: 0 1 auto（不放大、可缩小、基准按内容），再配合min-width: 250px这类硬约束 - 若需等宽分栏（如三列），用
flex-basis: calc(33.333% - 12px)+gap: 12px，比靠 margin 或空 div 稳定得多 - 避免
flex: 1或flex-grow: 1——它会吃光所有剩余空间，让flex-wrap彻底失效 - Safari 要求子元素加
min-width: 0，否则错误继承最小宽度，使换行判断失准 - 空
<div> 在这些环境下行为完全不可预测，调试成本远高于直接改用 <code>grid真需要“手动断行”时，用伪元素比空 div 更干净
如果业务逻辑确实要求某处必须断行（比如标题后强制换行、表单分组），用伪元素比 DOM 插入更轻量、无语义干扰：
立即学习“前端免费学习笔记（深入）”；
.break-line::after { content: ""; flex-basis: 100%; order: 99; }-
::after不影响 HTML 结构，不参与 tab 键导航，不触发无障碍 announce -
order: 99确保它排在视觉末尾，不影响其他子项顺序 - 仍需配合
flex-wrap: wrap，否则伪元素自身也会被压缩，不一定生效
复杂点在于：换行不是“加个东西让它断”，而是“告诉浏览器什么时候该断”。空
<div> 是绕过规则的取巧，而 <code>flex-wrap+min-width+gap才是规则本身。漏掉其中任一环，换行就只在你预设的分辨率下看起来“刚好”。 -
真正可控的换行必须靠 flex-wrap + 尺寸约束
换行触发条件只有一个：**主轴剩余空间不足以容纳下一个子项**。所以关键不是“插个断点”，而是让每个子项有明确的宽度基线和收缩边界。
IE11 和 Safari 下空 div 换行更不可靠
在 IE11 中，flex-wrap: wrap 本身就有兼容缺陷；Safari（尤其 iOS 15–16）对含 flex-basis: 100% 的项计算偏差大，空 <div> 可能被忽略、高度塌陷，或导致最后一行偏左。<ul>
<li>IE11 需要同时加 <code>display: -ms-flexbox 和 -ms-flex-wrap: wrap
