## **display:box|inline-box** | **属性值** | **说明** | | --- | --- | | display:box | 将容器盒模型作为块级弹性伸缩盒显示（旧版本） | | display:inline-box | 将容器盒模型作为内联级弹性伸缩盒显示（旧版本） | | box-orient | 实现盒子内部元素的流动方向 | | box-direction | 设置伸缩容器中的流动顺序 | | box-pack | 用于伸缩项目的分布方式 | | box-align | 处理伸缩容器的额外空间，如center居中对齐；值：start、end、center、baseline、stretch | | box-flex | 可以使用浮点数分配伸缩项目的比例//设置每个伸缩项目占用的比例 | | box-ordinal-group | 设置伸缩项目的显示位置 | Flexbox 旧版本兼容情况 |**属性**|**IE**|**Firefox**|**Chrome**|**Opera**|**Safari**| | --- | --- | --- | --- | --- | --- | | 带前缀 | 无 | 4 ~ 25 | 4 ~ 31 | 15 ~ 18 | 5.17+ | | 不带前缀 | 无 | 无 | 无 | 无 | 无 | 简单实例 ~~~html <style type="text/css"> p { width:150px; border:1px solid gray; margin:5px; padding:5px; } div { display:-moz-box; display:-webkit-box; display:box; } </style> <div> <p> 第一段内容... </p> <p> 第二段内容... </p> <p> 第三段内容... </p> </div> ~~~