彈性盒模型（Flexible Box Moudle），該模型用于決定元素在盒子中的分布方式以及處理盒子的可用空間。這與XUL（Firefox瀏覽器的用戶交互語言）相似，其他語言也使用相同的盒模型。如XAML，GladeXML等。通過彈性盒模型，可以輕松地創建自適應瀏覽器窗口的流動布局或自適應字體大小的彈性布局。

兼容性：彈性盒模型規范是W3C標準化組織于2009年發布的，目前還沒有主流瀏覽器對其進行支持，不過采用Webkit和Mozilla渲染引擎的瀏覽器都自定義了一套私有屬性，用來支持彈性盒模型。

采用Webkit渲染引擎的瀏覽器主要包括Safari和Chrome瀏覽器，該引擎支持以-webkit為前綴的私有屬性。

Mozilla渲染引擎的瀏覽器主要包括Firefox瀏覽器，該引擎支持以-moz為前綴的私有屬性。

相關屬性：

box-align：定義子元素在盒子垂直方向上的空間分配方式
box-direction：定義盒子的顯示順序
box-flex：定義子元素在盒子內的自適應尺寸
box-flex-group：定義自適應子元素群組
box-lines：定義子元素分列顯示
box-ordinal-group:定義子元素在盒子內的顯示位置
box-orient:定義盒子分部的坐標軸
box-pack：定義子元素在盒子內水平方向的空間分配方式

box-orient屬性

該屬性可用于定義盒子元素內部的流動布局方向.在使用彈性盒子模型時，需要先把父容器的display屬性設置為box或者inline-box。
語法：

box-orient：horizontal | vertail | inline-axis | block-axis | inherit

取值簡單說明：

horizontal：盒子元素從左到右在一條水平線上顯示它的子元素。

vertail：盒子元素從上到下在一條垂直線上顯示它的子元素。

inline-axis：盒子元素沿著內聯軸顯示它的子元素。

block-axis：盒子元素沿著塊軸顯示它的子元素。

實戰體驗：設計多欄布局

html代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表