flex容器响应式控制列数需配合栅格类实现：小屏竖排一列靠flex-column+col-12，大屏横排四列靠flex-md-row+col-md-3；仅用flex-wrap或flex-grow无法精准控宽，因flex项默认按内容宽渲染，而col-*才真正定义断点下的尺寸占比。
Flex容器在Bootstrap中如何响应式控制列数
直接用 flex-column 和 flex-md-row + col-md-3 组合就能实现：小屏竖排一列，大屏横排四列。关键不是靠 flex 本身“分列”，而是靠 Bootstrap 的栅格系统配合 flex 方向切换来达成视觉效果。
为什么不能只靠 flex-wrap 或 flex-grow
单纯设置 display: flex 并加 flex-wrap: wrap，再给子项设 flex: 1，容易在小屏下撑满宽度、错位或换行异常——因为 flex 项默认最小宽度是内容宽度，不是栅格意义上的“列宽”。Bootstrap 的 col-* 类才真正控制尺寸占比和断点行为。
-
col-12在 xs 上占满一行（强制一列） -
col-md-3在 md 及以上占 3/12 = 1/4 宽度，自然并排四列 - 配合
flex-md-row确保 md+ 时主轴为水平，避免 flex-direction 干扰栅格
实际写法：容器 + 子项类名要配对
容器必须是 row（或至少 d-flex），子项用响应式栅格类。别漏掉 row 的负 margin 修正，否则左右有额外空隙。
<div class="row d-flex flex-column flex-md-row"> <div class="col-12 col-md-3">Item 1</div> <div class="col-12 col-md-3">Item 2</div> <div class="col-12 col-md-3">Item 3</div> <div class="col-12 col-md-3">Item 4</div> </div>
-
flex-column是 xs/sm 默认方向（竖排） -
flex-md-row覆盖 md+ 的方向（横排），优先级高于flex-column - 子项同时带
col-12和col-md-3，确保断点切换时宽度正确 - 不用
justify-content或gap类也行，但若需间距，推荐g-md-3（仅 md+ 有间隙）
常见踩坑：flex-direction 和栅格混用失效
如果容器写了 flex-column 却没加 flex-md-row，或者子项只写 col-md-3 没写 col-12，小屏会塌成窄条甚至溢出容器——因为未声明 xs 下的宽度，浏览器按内容宽度渲染，flex 主轴又是垂直的，结果就是高度堆叠、宽度失控。
- 错误写法：
<div class="d-flex flex-column"><div class="col-md-3">…</div></div>→ xs 下无宽度约束 - 错误写法：
class="d-flex flex-md-column"→ 把大屏设成竖排，跟需求反了 - 注意 Bootstrap 5+ 已移除
flex-sm-*等中间断点，md是第一个可用断点（≥768px）
真正的难点不在写几行类名，而在于理解：flex 控制排列方向，栅格控制每项宽度占比，二者必须按断点协同声明，缺一不可。
