彈性盒模型（flexible box moudle），該模型用於決定元素在盒子中的分布方式以及處理盒子的可用空間。這與xul（firefox瀏覽器的使用者互動語言）相似，其他語言也使用相同的盒模型。如xaml，gladexml等。通過彈性盒模型，可以輕鬆地建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。
相容性：彈性盒模型規範是w3c標準化組織於2023年發布的，目前還沒有主流瀏覽器對其進行支援，不過採用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**：
xml/html code複製內容到剪貼簿
css3**：
css code複製內容到剪貼簿
演示效果：
box-direction屬性
box-direction屬性可以改變盒子元素中內部元素的流動順序，該屬性基本語法：
box-direction：normal | reverse | inherit
取值簡單說明：
normal：正常顯示順序，即如果盒子元素的box-origent屬性值為horizontal，則其包含的子元素按照從左到右的順序顯示，即每個子元素的左邊總是靠近前乙個子元素的右邊；如果盒子元素的box-origent屬性值設定為vertical，則其包含的子元素按照從上到下的順序顯示。
reverse：反向顯示，盒子所包含的子元素的顯示順序將於normal相反。
inherit：繼承上級元素的顯示順序。
實戰體驗：反向布局網頁（以上面的案例為基礎）：
css3**：
css code複製內容到剪貼簿
演示效果：
box-ordinal-group屬性
box-direction屬性可以改變盒子內部元素的流動順序，而box-ordinal-group屬性能夠設定每個子元素在盒子中的具體顯示位置，語法如下：
box-ordinal-group：
取值說明：
屬性值是乙個自然數，從1 開始，用來設定子元素的位置符號。子元素的分布將根據這個屬性值從小到大進行排列。在預設情況下，子元素將根據元素的位置進行排列。
注意：如果沒有指定box-ordinal-group屬性值的子元素，則其序號預設都為1，並且序號相同的元素將按照他們在文件中的載入的順序進行排列。
實戰體驗：垂直網頁布局
html**：
xml/html code複製內容到剪貼簿
css3**：
css code複製內容到剪貼簿
演示效果：
css3 彈性盒模型
1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定，兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...
CSS3彈性盒模型
一.方向和順序 彈性盒子的內容可以以任何方向和順序布局，這使布局更簡單，其功能通過以下幾個屬性實現 1 flex direction 值為row 預設值 row reverse column column reverse，用於控制彈性盒子的內容在主軸上的放置方向。row 與當前的寫模式相同，例如 中...
Css3彈性盒模型
css3引入了新的盒模型 彈性盒模型，該模型決定乙個盒子在其他盒子中的分布方式以及如何處理可用的空間。這與xul 火狐使用的使用者互動語言 相似，其它語言也使用相同的盒模型，如xaml gladexml。使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。本文的例子使用...