<p>Flex多列布局更适合初级项目，因无需清浮动、避免空白间隙、响应式仅需改一个属性；用flex:1 1 calc(33.333% - 10px)配合gap和min-width实现等宽三列自动换行；移动端通过媒体查询切换flex-basis值实现列数动态变化。</p>
flex 多列布局为什么比 float / inline-block 更适合初级项目
因为不用清浮动、不用处理行内元素的空白间隙、响应式切换列数时只需改一个属性。对新手来说，display: flex + flex-wrap: wrap 是最不容易出错的多列起点。
如何用 flex 实现等宽三列且自动换行
关键不是写死宽度，而是让子项「均分容器」+「允许折行」：
- 父容器设
display: flex和flex-wrap: wrap - 子项设
flex: 1 1 calc(33.333% - 20px)（减去左右 margin 后的真实可用宽度） - 为避免最后一行子项撑不满整行，建议统一加
margin而非只加右/下边距
.container {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 推荐用 gap 替代 margin，更可控 */
}
.item {
flex: 1 1 calc(33.333% - 10px); /* gap 已处理间距，这里只减 gap 值 */
min-width: 280px; /* 防止在小屏下缩太窄 */
}移动端适配时列数动态变化怎么做
不推荐用 JS 动态改 class，直接用媒体查询配合 flex-basis 更稳：
- 小屏（如手机）：
flex-basis: 100%→ 单列 - 中屏（如平板）：
flex-basis: 50%→ 双列 - 大屏（桌面）：
flex-basis: calc(33.333% - 10px)→ 三列 - 注意：所有断点都基于
min-width，避免和 viewport 宽度判断逻辑冲突
@media (max-width: 767px) {
.item { flex-basis: 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.item { flex-basis: 50%; }
}
@media (min-width: 1024px) {
.item { flex-basis: calc(33.333% - 10px); }
}常见踩坑：flex 多列内容高度不一致导致错位
这是初学者最常遇到的视觉问题——某列内容高，下一行开头被顶偏。根本原因不是 flex 本身，而是没控制好子项的对齐方式：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须加
align-items: flex-start（默认是stretch，会拉伸所有子项等高） - 如果需要底部对齐按钮之类，用
margin-top: auto在子项内部推，而不是依赖align-items: flex-end -
gap属性在 Flex 布局中完全支持现代浏览器，但 IE 不支持；若需兼容 IE，只能退回margin+:nth-child清除
实际项目里，列数变化频繁或内容结构复杂时，grid 确实更合适；但对纯展示型卡片列表、新闻摘要这类初级需求，flex + flex-wrap 加上合理的 flex-basis 和 gap，已经足够干净利落。别过早引入复杂方案，先跑通再优化。
