display:box 是2009年草案的独立布局模型，与现代flex无继承关系，仅在Chrome≤28、Safari≤7等极旧环境可用，需显式写-webkit-box-orient，不可混用flex，现仅line-clamp等特定场景必须保留。
display:box 是什么，现在还能用吗
它不是“旧版 flex”，而是 2009 年草案的独立实现，和现代 display: flex 没有继承关系。Chrome 21–28、Safari 6.1–7、Firefox 17–18、Android 4.3 WebView 这些环境里能解析 display: -webkit-box 或 display: -moz-box，但行为不统一：比如 box-orient 默认值在 iOS 7 Safari 里被当 vertical 处理，而现代 flex-direction 默认是 row。
常见错误现象包括：-webkit-box-pack: center 在某些 Android WebView 中完全失效，子元素宽度计算错乱，box-flex 的数值缩放逻辑和 flex-grow 也不等价。
- 别把它当
flex的降级方案，它是另一套语义系统 - 仅在明确要支持 Chrome ≤28 或 Safari ≤7 的极少数场景中启用
- 必须显式写
-webkit-box-orient: horizontal，不能省略 - 混用
display: -webkit-box和display: flex会导致新旧引擎各自忽略对方声明，布局彻底失控
IE10–11 的 -ms-flexbox 怎么处理
IE10/11 用的是微软基于 2009 草案的变体 display: -ms-flexbox，语法接近 display: box，但又不完全兼容。它支持 -ms-flex-pack（对应 justify-content）、-ms-flex-align（对应 align-items），但不支持 -ms-flex-wrap —— 写了也白写，IE 直接跳过。
关键陷阱：-ms-flex-align 在 IE10 中不处理多行交叉轴对齐（即没有 align-content 等价物）；IE11 若写了 display: flex，会尝试走新标准解析，反而触发 bug，必须强制用 display: -ms-flexbox 才进入兼容模式。
立即学习“前端免费学习笔记（深入）”；
-
-ms-前缀属性必须紧跟在display: -ms-flexbox声明之后，否则被忽略 -
flex-wrap: wrap在 IE 中无解，得靠 JS 检测或改用 float/table 布局兜底 - autoprefixer 默认不生成
-ms-flex-系列，需手动配置flexbox: '2009'
autoprefixer 能否自动补全 display:box 兼容代码
不能全靠它。autoprefixer 对 display: box 系列的支持非常有限：开启 flexbox: '2009' 后，它能把 flex: 1 转成 -webkit-box-flex: 1，但不会处理 align-self（老草案压根没这概念），也不会把 justify-content: space-between 映射为 -webkit-box-pack: justify —— 因为部分旧引擎根本不认 justify 值。
典型错误现象：项目配置了 last 2 versions，但在 Chrome 25 下样式仍错位，就是因为 autoprefixer 没生成 -webkit-box-pack 等声明。
- 必须手动补全关键老属性，如
-webkit-box-pack、-webkit-box-align - 不要依赖 autoprefixer 自动推导
box-orient方向，必须显式写 -
display: -webkit-box和display: -ms-flexbox的属性映射表不一致，不能一概而论
line-clamp 和 Android UC 浏览器为什么还绕不开 display:box
这是目前最硬的遗留依赖：display: -webkit-box + -webkit-line-clamp 是唯一能在 Android UC 浏览器（非 Chromium 内核）上生效的多行截断方案。iOS UC 和 Safari 支持新旧两套，但 Android UC 只认 -webkit-box。
注意：line-clamp 在现代 flex 容器中无法工作，因为其截断机制依赖于 -webkit-box 的行盒渲染逻辑，和 flex 的主轴伸缩模型冲突。
- 仅在此类特定需求下保留
display: -webkit-box，其他布局逻辑尽量隔离 - 避免在同一个容器上叠加
flex属性，会导致line-clamp失效 - 若需响应式截断，得用 JS 动态切换 display 值，而非 CSS 条件判断
box-orient 的默认解析不一致，且无法用 @supports 检测。一旦涉及 iOS 7/Safari 6.1 或 Android 4.3 WebView，就得手动加前缀并显式设方向，不能指望“写了就跑通”。 
