Flexbox 通过 flex-wrap: wrap 配合子项 width 或 flex-basis 控制列数，而非容器设列；推荐用 flex: 0 0 + calc() 和 gap 实现响应式布局，避免 flex: 1 和 margin 混用。
flex-wrap: wrap 配合 width 控制列数
Flexbox 本身不提供“列数”这个参数，所谓“自动列数”，本质是让子元素在主轴（默认 row）上尽可能多排，溢出时换行。关键不在 flex 容器设几列，而在每个子项的 flex-basis 或显式 width。
常见错误是只写 display: flex; flex-wrap: wrap; 却不约束子项宽度，导致所有子项挤在一行或单列堆叠。
- 子项设固定宽度（如
width: 200px;），容器宽度变化时列数自动增减 - 用
flex: 0 0 auto;+min-width更健壮，避免缩放时子项被压缩变形 - 避免对子项设
flex: 1;—— 它会强行拉伸填满剩余空间，破坏列数逻辑
响应式列数：用媒体查询切换子项宽度
“自动”不是无脑自适应，需配合断点明确不同视口下的单列宽度。比如卡片列表在桌面端每行 3 张、平板 2 张、手机 1 张，就靠改子项的 width 或 flex-basis 实现。
不推荐用 JavaScript 动态计算列数——开销大、闪屏、SEO 不友好，CSS 原生方案更可靠。
立即学习“前端免费学习笔记（深入）”；
- 桌面端：
.item { flex: 0 0 calc(33.333% - 12px); }（预留间隙） - 平板：
@media (max-width: 768px) { .item { flex: 0 0 calc(50% - 8px); } } - 手机：
@media (max-width: 480px) { .item { flex: 0 0 100%; } }
gap 与 margin 混用容易错位
gap 是 flex 容器属性，用于控制子项间间距；若同时给子项设 margin，会导致实际间距翻倍或首尾留白异常。
尤其在使用 justify-content: center; 时，外边距会让整体居中偏移，而 gap 不影响对齐逻辑。
- 统一用
gap（推荐，语义清晰、浏览器支持良好） - 若需兼容旧版 Safari（margin 并手动清除首行/末行多余边距
- 不要混用：删掉所有子项的
margin-left/right，只保留gap
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
flex: 0 0 calc(33.333% - 16px);
}
@media (max-width: 768px) {
.item {
flex: 0 0 calc(50% - 16px);
}
}
@media (max-width: 480px) {
.item {
flex: 0 0 100%;
}
}
真正难的是间隙计算和断点取值——calc() 里减去的像素必须等于 gap 值，否则列宽错乱；断点不能只看设备尺寸，得按内容实际折行位置调。
