flex布局实现手机端多列卡片折行需四者协同：显式设flex-wrap: wrap开启换行；卡片用flex: 0 1 calc()或width+flex-shrink+min-width: 0约束尺寸；用gap或margin控制间距；卡片内加word-break: break-word防文字撑破。
Flex布局实现多列卡片在手机端自动折行，关键不是“加了flex就完事”，而是**显式控制换行开关、子项尺寸约束、容器宽度限制和文字防撑破**四者协同。默认不换行，必须主动打开，否则窄屏下卡片会强行压缩甚至溢出。
必须设 flex-wrap: wrap
这是换行的唯一开关。只写 display: flex，哪怕屏幕再窄，所有卡片也死扛在一行——这是 Flex 和 inline-block 最本质的区别。
- 写成
flex-wrap: wrap才允许子项折到下一行 - 避免用
nowrap（默认值）或漏写该声明 - IE10–11 需补前缀：
-ms-flex-wrap: wrap
给卡片设可收缩的宽度基准
即使开了换行，如果每张卡片都按内容无限撑宽，它可能一个标题就占满整行，看起来像“换行了”，其实只是每个卡片太宽。
- 推荐写法：
flex: 0 1 calc(50% - 8px)（两列）或calc(33.333% - 12px)（三列），减去 gap 或 margin 宽度 - 更稳妥：直接设
width: 300px+flex-shrink: 1，防止超宽时拒绝缩小 - 务必加
min-width: 0，解除 Flex 项目默认最小宽度保护，否则卡片宁可溢出也不缩
用 gap 或 margin 控制间距，别混用 float/auto
Flex 下 margin-left: auto、float 无效，还会干扰换行逻辑。
- 现代浏览器优先用
gap: 12px，它同时管行内和行间间距 - 需兼容旧版时，改用
margin，但注意最后一行对齐问题：给卡片设margin-right: 12px，再用:nth-child(3n)清除右 margin - 水平对齐建议用
justify-content: space-between或space-evenly，比center更稳定
防文字撑破卡片，尤其 URL 和长单词
flex-wrap 管的是卡片级换行，不是卡片内部文字换行。一个无空格的长链接能把整张卡片拉宽，导致本该折行的卡片卡死在第一行。
- 给卡片容器加
word-break: break-word或overflow-wrap: break-word - 禁用
white-space: nowrap——它会彻底锁死所有换行行为 - 图片记得设
max-width: 100%+height: auto，避免固有宽高破坏布局
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
