通過閱讀和學習書籍《CSS3實戰》總結
《CSS3實戰》/成林著.—北京機械工業出版社2011.5

彈性盒模型（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程式碼：

<div id="box">
    <div id="box0"><img src="images/web_01.gif" /></div>
    <div id="sub-box">
        <div id="box1"><img src="images/web_02.gif" /></div>
        <div id="box2"><img src="images/web_03.gif" /></div>
        <div id="box3"><img src="images/web_04.gif" /></div>
    </div>
</div>

• CSS3程式碼：

<style type="text/css">
body{/*文件樣式*/
    margin:0;padding:0px;/*清除頁邊距*/
    text-align:center;/*文件居中對齊*/
    background:#170843;
}
#box{
    margin:auto;/*文件居中對齊*/
    text-align:center;
    width:975px;
}
/*定製各個欄目的寬度*/
#box1{width:185px;}
#box2{width:601px;}
#box3{width:189px;}
/*定製子包含框的盒子顯示，其包含的元素水平流動*/
#sub-box{
    display:-moz-box;
    display:-webkit-box;
    display:box;
    box-orient:horizontal;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;  
}
</style>

演示效果：

box-direction屬性

box-direction屬性可以改變盒子元素中內部元素的流動順序，該屬性基本語法：

box-direction：normal | reverse | inherit

取值簡單說明：

• normal：正常顯示順序，即如果盒子元素的box-origent屬性值為horizontal，則其包含的子元素按照從左到右的順序顯示，即每個子元素的左邊總是靠近前一個子元素的右邊；如果盒子元素的box-origent屬性值設定為vertical，則其包含的子元素按照從上到下的順序顯示。

• reverse：反向顯示，盒子所包含的子元素的顯示順序將於normal相反。

• inherit：繼承上級元素的顯示順序。

實戰體驗：反向佈局網頁（以上面的案例為基礎）：

CSS3程式碼：

<style>
body{
    margin:0;padding:0px;
    text-align:center;
    background:#170843;
}
#box{
    margin:auto;
    text-align:center;
    width:975px;
}
#box1{width:185px;}
#box2{width:601px;}
#box3{width:189px;}
#sub-box{
    display:-moz-box;
    display:-webkit-box;
    display:box;
    box-orient:horizontal;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;  
    box-direction:reverse;
    -moz-box-direction:reverse;
    -webkit-box-direction:reverse;
}
</style>

演示效果：

box-ordinal-group屬性

  box-direction屬性可以改變盒子內部元素的流動順序，而box-ordinal-group屬效能夠設定每個子元素在盒子中的具體顯示位置，語法如下：

box-ordinal-group：<integer>

取值說明：

屬性值是一個自然數，從1 開始，用來設定子元素的位置符號。子元素的分佈將根據這個屬性值從小到大進行排列。在預設情況下，子元素將根據元素的位置進行排列。
注意：如果沒有指定box-ordinal-group屬性值的子元素，則其序號預設都為1，並且序號相同的元素將按照他們在文件中的載入的順序進行排列。

實戰體驗：垂直網頁佈局

HTML程式碼：

<div id="box">
    <div id="box1"><img src="images/web1_01.gif" /></div>
    <div id="box2"><img src="images/web1_02.gif" /></div>
    <div id="box3"><img src="images/web1_03.gif" /></div>
    <div id="box4"><img src="images/web1_04.gif" /></div>
</div>

CSS3程式碼：

<style type="text/css">
body {
    margin:0;
    padding:0;
    text-align:center;
    background:#d9bfe8;
}
#box {
    margin:auto;
    text-align:left;
    width:988px;
}
/*定義盒形顯示及盒內元素垂直顯示*/
#box {
    display : -moz-box;
    display : -webkit-box;
    display : box;
    box-orient:vertical;
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
}
/*根據網頁內容的現實需要，藉助彈性盒模型調整各個板塊的顯示順序*/
#box1 {/*設定第一個元素顯示在第二個位置*/
    -moz-box-ordinal-group : 2;/*相容Mozilla Gecko引擎*/
    -webkit-box-ordinal-group : 2;/*相容Webkit引擎*/
    box-ordinal-group : 2;/*標準用法*/
}
#box2 {/*設定第二個元素顯示在第三個位置*/
    -moz-box-ordinal-group : 3;/*相容Mozilla Gecko引擎*/
    -webkit-box-ordinal-group : 3;/*相容Webkit引擎*/
    box-ordinal-group : 3;/*標準用法*/
}
#box3 {/*設定第三個元素顯示在第一個位置*/
    -moz-box-ordinal-group : 1;/*相容Mozilla Gecko引擎*/
    -webkit-box-ordinal-group : 1;/*相容Webkit引擎*/
    box-ordinal-group : 1;/*標準用法*/
}
#box4 {/*設定第四個元素顯示在第四個位置*/
    -moz-box-ordinal-group : 4;/*相容Mozilla Gecko引擎*/
    -webkit-box-ordinal-group : 4;/*相容Webkit引擎*/
    box-ordinal-group : 4;/*標準用法*/
}
</style>

演示效果：