flexbox多栏布局核心在flex-wrap与flex-basis配合：设flex-wrap: wrap触发换行，flex-basis设理想宽度（如250px），min-width防过度压缩，禁用width避免冲突。
flexbox 多栏布局的核心控制点在哪
关键在 flex-wrap 和 flex-basis 的配合。不设 flex-wrap: wrap，再多内容也强行挤在一排；只设 flex-basis 却忽略 min-width 或媒体查询，小屏下依然会溢出或列宽失衡。
如何让每列宽度随屏幕自动调整而不换行错乱
用 flex-basis 配合 min-width 限制最小列宽，再靠 flex-wrap: wrap 触发换行。浏览器会优先保持列宽，仅当容器不够容纳当前列数时才折行。
-
flex-basis: 250px表示每列理想宽度为 250px，但不是固定死的 -
min-width: 250px放在子项上（如.column { min-width: 250px; }），防止被压缩过窄 - 父容器必须设
display: flex和flex-wrap: wrap - 避免给子项设
width，否则会和flex-basis冲突
.grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.column {
flex: 1 1 250px;
min-width: 250px;
}为什么加了 flex-wrap 还是不换行
常见原因有三个：子项设置了 white-space: nowrap、父容器 width 被意外撑开（比如含未重置的 margin/padding）、或者子项用了 flex: 0 0 auto 且内容超长导致无法收缩。
- 检查子项是否含长单词或 URL，加
word-break: break-word或overflow-wrap: break-word - 确认父容器没有被
inline元素或浮动元素干扰布局流 - 用浏览器开发者工具看 computed 样式，重点查
flex-basis是否被覆盖成auto或0px - 临时加
border: 1px solid red看实际渲染尺寸，比凭空猜更可靠
移动端列数少、桌面端列数多，怎么不用媒体查询也能做
可以，但有代价：用 flex: 0 0 calc(100% / 3) 这类动态计算值，需配合 min-width 和 flex-wrap。不过 CSS 计算精度有限，小屏下可能因四舍五入导致最后一列掉行。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案仍是媒体查询，稳定可控：
@media (max-width: 768px) { .column { flex-basis: 100%; } } - 如果坚持无媒体查询，至少补一层兜底：
.column { flex: 1; min-width: 300px; }，让浏览器自己决定列数 - 注意
calc()中不能混用单位，calc(100% / 3 - 1rem)是错的，gap 应该用gap属性单独控制
真正难的不是写几行 flex 代码，而是理解「flex-basis 是初始主轴尺寸，不是最终宽度」——它会被剩余空间、收缩比例、最小宽度共同修正。调试时盯着 computed 值里的 flex-basis 和 width 差异，比反复改 CSS 更快定位问题。
