彈性盒模型，該模型用於決定元素在盒子中的分布方式以及如何處理盒子的可用空間。有了他，咱們就可以輕鬆建立自適應瀏覽器視窗的流動布局或者自適應字型大小的彈性布局。
其屬性有：
box-align，定義子元素在盒子內垂直方向上的空間分配方式。
box-pack，定義子元素在盒子內水平方向上的空間分配方式。
box-direction，定義盒子的布局順序。
box-orient，定義盒子的布局取向。
box-ordinal-group，定義盒子布局的位置。
box-flex，定義盒子的彈性空間。
box-lines，空間溢位管理。
下面就一一對其解釋。
box-orient，定義盒子元素內部的流動布局方向，父容器的display設定為box或者inline-box。其值可以是horizontal:盒子元素從左到右在一條水平線上顯示他的子元素；vertical:盒子元素從上到下在一條垂直線上顯示他的子元素；inline-axis：盒子元素沿著內聯軸顯示他的子元素；block-axis:盒子元素沿著塊軸顯示他的子元素。
box-direction，改變盒子元素中內部元素的流動順序，其值可以是normal:正常順序顯示；reverse：反向顯示；inherit：繼承上級元素的顯示順序。
box-ordinal-group，可以設定每乙個子元素在盒子中的具體顯示位置，他的值是自然數，從1開始，根據該值的大小進行排序。
box-flex，該屬性在彈性布局中絕對的好使啊，他的取值是乙個整數或者小數，當盒子中定義了多個box-flex時，瀏覽器將會把這些子元素的box-flex值相加，然後計算他們各自所佔的比例來分配空間，但是他只能在盒子擁有固定的空間大小之後才能夠正確解析。
box-pack，他的值可以是start：顯示在盒子的左側，富餘空間顯示在右側；end：顯示在盒子的右側，富餘空間顯示在左側；center：平均分配；justify：富餘的空間在子元素之間平均分配。
box-align，他的值可以是start：沿著盒子的上邊緣排序；end：沿盒子的下邊緣排序；center：上面一半，下面一半；baseline：所有盒子沿著他們的基線排列，富餘空間可前可後顯示；stretch：每個子元素的高度被調整到適合盒子的高度顯示。
box-lines，其取值可以使single：所有子元素都單行或者單列顯示；multiple：所有子元素可以多列或者多行顯示。不過目前並沒有瀏覽器支援這一屬性。
學習CSS盒模型和CSS3彈性盒模型
css盒模型本質是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。div300px 寬 50px 左 右填充 50px 左 右邊框 50px 左 右邊距 450px 最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度...
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 與當前的寫模式相同，例如 中...