## **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> ~~~