chrome 21–28 不支持 flex-wrap，因其仅实现2012年旧版flexbox草案，该属性未被纳入；即使加 -webkit-flex-wrap: wrap 也常被静默忽略，需改用 float + overflow: hidden 等降级方案。
flex-wrap 在 Chrome 21–28 中基本不可用，不是加前缀就能修好的问题；它在 Chrome 27 下可能解析为 display: block，导致子项堆成一列、换行完全失效。
Chrome 21–28 根本不支持 flex-wrap 的真实原因
这些版本的 Blink 内核只实现了旧版 Flexbox（2012 年草案），flex-wrap 属于后续标准新增特性，未被纳入。即使写了 -webkit-flex-wrap: wrap，Chrome 25–27 也常静默忽略——DevTools 里该属性会显示为灰色或带删除线，getComputedStyle(el).flexWrap 返回空字符串。
常见错误现象包括：多列卡片挤在一行溢出容器、justify-content: space-between 失效、响应式断点后布局直接崩溃。
-
flex-wrap: wrap必须搭配flex-basis或显式宽度才能触发换行，但旧 Chrome 对flex-basis解析也不稳定 - 若父容器用了
float或position: absolute，整个-webkit-flex上下文会被丢弃，flex-wrap更无从谈起 -
display: inline-flex+flex-wrap在 Chrome 24 下直接退化为单行内联行为，不换行也不报错
替代方案：用 float + overflow: hidden 模拟换行
当目标必须兼容 Chrome 21–28 时，放弃 flex-wrap 是唯一可靠路径。改用浮动布局可精确控制换行时机，且兼容性覆盖到 IE6。
- 子项统一设
float: left和固定宽度（如width: calc(33.333% - 12px)） - 父容器加
overflow: hidden清除浮动，避免塌陷 - 横向间距用
margin-right，末项用.item:nth-child(3n) { margin-right: 0; }清除（Chrome 23+ 支持:nth-child） - 避免用
display: inline-block—— Chrome 22 下基线对齐错乱，且间隙不可控
为什么 @supports (flex-wrap: wrap) 在旧 Chrome 里毫无意义
@supports 规则本身在 Chrome 28 及更早版本中未实现，整块 CSS 会被当作无效语法跳过。写 @supports (flex-wrap: wrap) { .container { flex-wrap: wrap; } } 等于什么都没写。
真正能用的检测方式只有 UA 字符串判断（服务端注入 class）或 JS 特性检测：
- JS 检测示例：
const supportsFlexWrap = CSS.supports('flex-wrap', 'wrap');—— 但 Chrome 28 返回false，无法区分“不支持”和“不认识CSS.supports” - 更稳妥的是结合
document.documentElement.style.flexWrap !== undefined和navigator.userAgent.includes('Chrome/2') - 别依赖 Autoprefixer 自动补
flex-wrap前缀——它不会生成等效 fallback，也不会警告你该属性已被忽略
最易被忽略的细节：子项 white-space 和 min-width 会干扰换行逻辑
在浮动模拟方案中，如果子项含长英文单词或 URL，white-space: nowrap（某些 UI 框架默认加）会导致整行无法折行；而 min-width: fit-content 在 Chrome 26 下解析为空，使子项撑宽后强制单行。
- 显式重置：
.item { white-space: normal; min-width: 0; } -
min-width: 0是关键：它允许子项收缩，否则浮动项宽度超限仍拒绝换行 - 若子项含图片，记得加
max-width: 100%，否则图片原始尺寸会破坏网格流
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
