<p>flex-basis: 100% 会导致子项独占一行，并非真正换行解法；正确做法是配合 flex-wrap: wrap、合理 flex-basis（如 200px 或 calc(33.333% - gap)）与 min-width，辅以 box-sizing: border-box 和 gap 控制间距。</p>
flex-basis: 100% 会让子元素强制独占一行
这不是“填满并换行”的解法，而是“每项都撑满容器宽度、不并排、强行换行”的副作用。它常被误用为“自动换行”，但实际效果是破坏了 flex 的流式布局逻辑——flex-basis: 100% 让每个子项的基准宽度等于容器宽，flex 无法再压缩或分配剩余空间，自然就一个占一行。
常见错误现象：flex-wrap: wrap 没生效、子元素明明宽度很小却垂直堆叠、响应式下完全不随屏幕缩放。
- 只在单列布局（如标题+描述+按钮竖排）中才适合用
flex-basis: 100% - 若目标是“多列自适应 + 换行”，必须让子项有合理的基础宽度（比如
flex-basis: 200px或flex-basis: 33.333%），再配合flex-wrap: wrap -
flex-basis设为百分比时，是相对于父容器宽度计算的；设为固定值（如200px）则更可控，尤其在响应式场景下
真正实现“填满并换行”靠的是 flex-wrap + 合理的 flex-basis + min-width
核心思路：允许换行（flex-wrap: wrap），同时控制子项最小宽度，让浏览器根据容器宽度自动判断能塞几个、何时折行。
使用场景：卡片列表、按钮组、标签云、响应式网格。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex和flex-wrap: wrap - 子元素推荐写
flex: 0 1 auto（不放大、可缩小、基准按内容），再加min-width: 250px这类约束，比死磕flex-basis更健壮 - 如果需要等宽分栏（如三列），用
flex-basis: calc(33.333% - 12px)配合gap，避免 margin 导致换行错乱 - 注意兼容性：
gap在 Flex 中 IE 完全不支持，老项目需用margin模拟，但要记得处理首尾/换行后的多余外边距
flex-grow: 1 会吃掉所有剩余空间，和“换行”基本互斥
一旦子元素设了 flex-grow: 1，它就会拼命拉伸占满可用空间，flex 容器没“剩余宽度”留给其他兄弟，flex-wrap 失去触发条件——除非你手动缩小容器到极窄，否则永远不换行。
错误示例：flex: 1 写在子项上，还指望它和旁边元素并排再折行？不可能。
- 想等分布局且允许换行？用
flex: 0 1 200px（不放大、可缩小、基准 200px）代替flex: 1 - 如果真需要某一项独占剩余宽度（如搜索框+按钮组合），把它单独提出来，其余项用固定
flex-basis，别混在一起设flex-grow -
flex-grow和flex-wrap同时存在时，浏览器优先满足拉伸，换行只是“拉伸失败后”的兜底行为，不是主动策略
移动端换行错位？检查 box-sizing 和 padding/margin
Flex 换行后子元素位置偏移、高度不齐、间隙异常——90% 是因为 box-sizing 默认是 content-box，而 padding 和 border 被算在 flex-basis 之外，导致实际占用宽度超预期，提前触发换行或挤占空间。
典型错误：写了 flex-basis: 33.333%，但加了 padding: 12px，结果三项总宽远超 100%，第一行只能塞两个，第三个直接掉下去。
- 统一加
box-sizing: border-box到所有 flex 子项（或全局重置） - 避免在子项上用
margin控制间距，改用父容器的gap（现代方案）或负 margin 技巧（兼容旧版） - 调试时临时加
outline: 1px solid red查看真实布局边界，比依赖视觉估算靠谱得多
事情说清了就结束。flex 布局里，“填满”和“换行”本质是两个方向的力量：一个是横向扩张，一个是纵向妥协。硬凑一起，得先想清楚谁让步、让多少、在什么条件下让。
