display: -webkit-box的功能是什么？哪些浏览器支持该属性？

一、display: -webkit-box的具体作用 #

display: -webkit-box是WebKit内核浏览器实现的旧版弹性盒模型（Flexbox）前缀属性，早于W3C标准的display: flex出现，核心作用是解决传统布局（float、inline-block等）在对齐、空间分配、溢出处理上的痛点，实现一维灵活布局。

它通常配合以下WebKit前缀属性发挥作用：

• -webkit-box-orient: 控制子元素排列方向，可选值horizontal（水平，默认）或vertical（垂直）
• -webkit-box-pack: 控制子元素在主轴上的对齐方式，功能近似标准flex的justify-content，可选值start/end/center/justify
• -webkit-box-align: 控制子元素在交叉轴上的对齐方式，功能近似标准flex的align-items，可选值start/end/center/baseline/stretch
• -webkit-line-clamp: 配合-webkit-box-orient: vertical实现多行文本溢出省略，这也是当前它最常用的场景——不少旧浏览器不支持标准line-clamp，但能通过这个组合实现效果。

二、浏览器支持范围 #

目前主流浏览器对display: -webkit-box的兼容性覆盖非常广泛：

• 桌面端：Chrome（全版本兼容）、Safari（全版本兼容）、Chromium内核Edge（完全支持）、Firefox（较新版本开始兼容，用于适配历史代码）
• 移动端：iOS Safari（所有版本支持）、Android Browser（4.0及以上版本支持）、Chrome for Android（全版本支持）

注意：它属于非标准属性，W3C最终标准化的弹性盒模型是display: flex，但由于历史遗留，几乎所有现代浏览器都保留了对-webkit-box的支持。

三、是否可以安全使用 #

分场景判断：

1. 老旧浏览器兼容场景：如果需要适配iOS 6及以下、Android 4.3及这类旧设备，可以将display: -webkit-box作为降级方案，同时声明标准display: flex——现代浏览器优先用标准属性，旧设备回退到前缀属性。
2. 多行文本溢出场景：如果是为了实现多行文本省略，这个组合（display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp）依然是兼容性最优的方案之一，即使标准line-clamp已普及，部分旧设备仍依赖它。
3. 新布局开发：不建议优先使用-webkit-box，它的属性语法和标准flexbox差异大，功能也不如标准flexbox完善（缺少flex-wrap、精细化flex-grow控制等），维护成本更高，标准flexbox才是当前布局的首选。

内容的提问来源于stack exchange，提问作者AWIXOR