flex-wrap: wrap 必须写在父容器上，否则子项永不换行；需配合 display: flex 使用，且子项应设 flex: 0 1 auto 和 min-width: 0 以保障正常折行与收缩。
flex-wrap: wrap 必须写在父容器上，否则永远不换行
移动端 SKU 标签（如“红色”“XL”“现货”）堆在一行溢出，根本原因不是屏幕太窄，而是父容器没加 flex-wrap: wrap。Flex 默认行为就是 nowrap，哪怕你写了 display: flex，它也坚决不折行。
实操要点：
- 父容器必须同时声明
display: flex和flex-wrap: wrap，缺一不可 - 别把
flex-wrap写在子项（SKU 标签）上——它只对容器生效 - 用临时
border: 1px solid red检查父容器真实宽度，避免被祖先元素撑成width: auto导致“永远够宽” - Tailwind 用户注意：
flex或flex-row类默认不含换行，得额外加flex-wrap
SKU 标签不收缩、卡死第一行？检查 flex-shrink 和 min-width
即使开了 flex-wrap: wrap，如果某个标签设置了 flex-shrink: 0 或固定 width，它就会拒绝缩小，强行占满空间，其他标签只能被挤到右边甚至溢出——换行条件根本不会触发。
推荐写法：
- 子项用
flex: 0 1 auto（不放大、可缩小、基准由内容决定） - 加
min-width: 0，防止长 URL 或无空格英文单词把标签拉宽锁死换行 - 避免
flex: 1或flex: 1 1 200px：前者会抢满整行，后者在窄屏下可能算出负值 - 标签内文字用
white-space: nowrap保持单行外观，但外层容器仍能正常换行
换行后上下错位、高度不齐？align-items: flex-start 更靠谱
默认 align-items: stretch 会让所有 SKU 标签拉伸到当前行最高项的高度。比如一个带图标的“促销中”标签比纯文字的“黑色”高，整行都会被拉高，视觉上像错位。
解决方案很直接：
- 父容器加
align-items: flex-start，让所有标签顶部对齐 - 别依赖
vertical-align：Flex 布局里它无效 - 图标和文字的
line-height要一致，否则基线偏移会放大错位感 - 如果必须居中，改用
align-self: center单独控制某一项，别全局拉伸
小屏下标签重叠或间距失控？优先调 flex-basis，少用 media query
很多人一上来就写 @media (max-width: 480px)，但真正卡住的是 flex-basis 在窄屏下的计算偏差。比如 calc(25% - 8px) 在 320px 宽度下算出负值，布局直接崩溃。
更稳的做法：
- 子项用
min-width: 80px（适配手指点击最小触控区） +flex: 1 1 auto - 父容器用
gap: 8px控制间距，比手动设margin-right干净且自动处理末项 - 需要边缘留白？给父容器加
padding: 8px，gap不管四边 - Safari 14.1 以下不支持
gap，老项目得回退到margin+:last-child { margin-right: 0 }
真正难调的从来不是那一行 flex-wrap: wrap，而是它和容器宽度、子项弹性、文本断行三者之间的实时博弈——改一个参数，另外两个很可能跟着偏移。动手前先打开 DevTools，把这三块同时盯着看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
