flex-wrap: wrap 配合 min-width 可实现动态列数，因 flex-basis 不控换行而 min-width 能守住子项最小宽度，结合 box-sizing 和 gap 计算确保列数准确。
flex-wrap 配合 min-width 控制实际列数
Flexbox 本身没有“列数”这个属性，所谓“动态列数”，本质是让子项在容器宽度变化时自动换行，形成视觉上的多列布局。关键不在 flex-direction，而在 flex-wrap: wrap 和每个子项的最小宽度约束。
-
flex-wrap: nowrap（默认）→ 所有子项强行挤在一行，超出就溢出或缩小 -
flex-wrap: wrap→ 子项宽度总和超容器时，自动折到下一行 - 真正决定“几列”的，是每个子项的
min-width（或flex-basis+min-width组合）
为什么不能只靠 flex-basis？
flex-basis 只是初始主轴尺寸，不构成换行门槛。如果子项内容很短、或父容器缩得很窄，flex-basis: 200px 的项仍可能被压缩到 100px 甚至更小，导致本该两列变三列甚至四列——列数失控。
必须配合 min-width 才能守住底线：
.item {
flex: 1 1 200px;
min-width: 200px;
}这样：当容器宽度 ≥ 400px，至少容下 2 个；≥ 600px，至少容下 3 个……列数随容器宽度阶梯式变化。
立即学习“前端免费学习笔记（深入）”；
响应式列数的典型写法
用媒体查询或 @container（需父容器设 container-type: inline-size）调整 min-width，比改 flex-direction 更可靠：
.grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
<p>.item {
flex: 1 1 0;
min-width: 250px; /<em> 默认最多 3 列（假设 gap 小） </em>/
}</p><p>@media (min-width: 768px) {
.item {
min-width: 320px; /<em> 宽屏下最多 2 列 </em>/
}
}</p><p>@media (min-width: 1024px) {
.item {
min-width: 400px; /<em> 大屏下最多 2 列，但更宽松 </em>/
}
}注意：flex: 1 1 0 让子项优先按 min-width 分配空间，避免空隙拉伸失衡。
常见翻车点：gap 和 box-sizing 没算进去
计算列数时，人脑常忽略两点：
-
gap占用额外空间，3 个子项有 2 个 gap → 总间隙 =(列数 - 1) × gap - 若子项用了
border或padding，且box-sizing: content-box（默认），那min-width不包含它们，实际占宽更大
稳妥做法：统一设 box-sizing: border-box，并在 min-width 中预留 gap 影响（或用 calc()）：
.item {
box-sizing: border-box;
min-width: calc(33.333% - 0.666rem); /* 3 列 + gap: 1rem */
flex: 1 1 0;
}真正难的不是写几行 CSS，而是想清楚「最小可接受子项宽度」是多少——它取决于内容、断点设计、以及你愿不愿意让某类屏幕下出现 1 列孤零零的情况。
