<p>flex-wrap 实现多列文本自动换行需配合 flex-basis 控制子项宽度，推荐用 flex: 0 1 calc(33.333% - 1rem) 并在 480px、768px、1024px 设置断点调整 flex 值，比 grid 更兼容且轻量，同时注意 box-sizing、gap 兼容性及 align-content 优化对齐。</p>
flex-wrap 怎么让多列文本自动换行堆叠
直接用 flex-wrap: wrap 是基础，但光加这句不生效，因为默认 flex-direction: row 下子项没有宽度限制，浏览器会把所有文本挤在一行撑开容器。必须给每个文本列（比如 .col）设一个明确的 flex-basis 或 width，否则换行逻辑无从触发。
推荐写法是结合 flex: 0 1 calc(33.333% - 1rem) —— 表示「不放大、可缩小、基础宽度约三分之一减去间隙」，这样三列在宽屏下并排，窄屏下自动折成两行或单列。
.text-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.text-grid .col {
flex: 0 1 calc(33.333% - 1rem);
}媒体查询该在哪几个断点下手
别一上来就写 @media (max-width: 768px)，实际中多数多列文本在 480px、768px、1024px 这三个宽度就有明显布局断裂。关键是：每个断点要重置的是 flex-basis，不是整个 flex 声明。
常见错误是只改 width 却漏掉 flex-shrink，导致小屏下内容被强行压缩变形。建议统一用 flex 缩写控制。
立即学习“前端免费学习笔记（深入）”；
-
@media (max-width: 768px)→ 改为flex: 0 1 calc(50% - 0.75rem)（双列） -
@media (max-width: 480px)→ 改为flex: 0 1 100%（单列）
为什么用 flex-wrap 而不用 grid
纯文本多列场景下，flex-wrap 比 grid 更轻量，尤其当列数不固定（比如后端动态吐出 2–5 个 .col）时，grid-template-columns 得靠 repeat(auto-fit, minmax(...))，但老版本 Safari 对 auto-fit 支持差，而 flex-wrap 在 iOS 9+ 就稳。
另外，flex 的单轴对齐（justify-content / align-items）对文字块垂直居中更直观；grid 需额外设 align-content 控制行间距，容易和 gap 冲突。
移动端点击区域太小怎么顺手优化
多列文本常带链接或按钮，flex-wrap 布局本身不提供点击热区增强，但可以借 padding 和 min-height 防误触。重点是：别只加 padding，得配合 box-sizing: border-box，否则宽度计算会溢出破坏换行。
还要注意 gap 在 Flex 中不兼容 IE，如果需支持，得用 margin 模拟，且每行首项要去掉左 margin，末项去掉右 margin —— 这部分逻辑用 CSS 无法干净解决，不如直接上媒体查询分段控制。
真正容易被忽略的是：当文本列高度不一致时，flex-wrap 默认按行对齐顶部，若想视觉上更平衡，加 align-content: flex-start 防止空隙拉高整行。
