CSS 3中彈性盒布局的最新版概述
在CSS 3中，CSS Flexible Box模塊為一個非常重要的模塊肩祥，該模塊用于以非常靈活的方式實現(xiàn)頁面布局處理。
雖然可以使用其他CSS樣式屬性來實現(xiàn)頁面布局處理，但是如果使用CSS Flexible Box模塊中定義的彈性盒布局技術(shù)葛假，可以根據(jù)屏幕尺寸或瀏覽器窗口尺寸自動調(diào)整頁面中各局部區(qū)域的顯示方式情竹，即實現(xiàn)非常靈活的布局處理藐不。
雖然CSS Flexible Box模塊已經(jīng)被公布了好幾年，但是自開始公布以來，該模塊中所定義的內(nèi)容已經(jīng)經(jīng)過了幾次重大修改雏蛮。目前公布的正式版本為?CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 September 2012涎嚼。
目前為止，Opera 12.10版本以上挑秉，IE 11版本以上法梯、Chrome 21版以上、Firefox 22版本以上的瀏覽器均支持該最新版本犀概。
從示例頁面開始學(xué)習(xí)最新版本的彈性盒布局
接下來開始通過一個示例頁面開始學(xué)習(xí)最新版本的彈性盒布局立哑。該示例頁面中的body元素中的代碼如下所示。
<body>
<div id="main">
<div class="content">
<section>
<h1>section 1</h1>
<p>示例文字</p>
</section>
<section>
<h1>section 2</h1>
<p>示例文字</p>
</section>
<section>
<h1>section 3</h1>
<p>示例文字</p>
</section>
<section>
<h1>section 4</h1>
<p>示例文字</p>
</section>
</div>
<div class="content">
<section>
<h1>section 5</h1>
<p>示例文字</p>
<section>
<h1>section 6</h1>
<p>示例文字</p>
</section>
<section>
<h1>section 7</h1>
<p>示例文字</p>
</section>
<section>
<h1>section 8</h1>
<p>示例文字</p>
</section>
</div>
<div class="content">
<section>
<h1>section 9</h1>
<p>示例文字</p>
</section>
<section>
<h1>section 10</h1>
<p>示例文字</p>
</section>
<section>
<h1>section 11</h1>
<p>示例文字</p>
</section>
<section>
<h1>section 12</h1>
<p>示例文字</p>
</section>
</div>
</div>
</body>
接下來姻灶，首先對該頁面中各div元素及section元素指定邊框樣式铛绰，代碼如下所示。
<style>
#main {
border: 1px dotted #f0f;
padding: 1em;
}
.content {
border: 1px dotted #0ff;
padding: 1em;
}
section {
border: 1px dotted #f00;
padding: 1em;
}
</style>
在瀏覽器中打開目前為止的示例頁面产喉，頁面中各元素從上往下縱向排列捂掰，如下圖所示。
對示例頁面使用彈性盒布局
彈性盒布局的指定方法為：對需要布局的元素的容器元素使用display:flex;樣式屬性曾沈。在CSS Flexible Box模塊中这嚣，該容器元素中的每一個元素均被稱為“Flex item”，將該容器元素稱為“Flex container”塞俱。
彈性盒布局方式與使用float等樣式屬性進行的布局方式的一個主要區(qū)別為疤苹，當(dāng)使用float等樣式屬性時，需要對容器中每一個元素指定樣式屬性敛腌，當(dāng)使用彈性盒布局時卧土，只需對容器元素指定樣式屬性。
接下來像樊，我們首先對所有樣式類名為content的div元素使用彈性盒布局尤莺，這些div元素的容器元素為id屬性值為main的div元素，修改該元素的樣式代碼如下所示：
#main {
border: 1px dotted #f0f;
padding: 1em;
display: flex;
}
在瀏覽器中打開示例頁面生棍，頁面中所有樣式類名為content的div元素的排列方式被修改為橫向排列颤霎，如下圖所示。
設(shè)置元素排列方向
可以通過flex-direction樣式屬性的使用來控制容器中所有子元素的排列方向涂滴，可指定值如下所示友酱。
- row:橫向排列（默認值）
- row-reverse:橫向反向排列
- column:縱向排列
- column-reverse:縱向反向排列
修改id屬性值為main的div元素的樣式代碼如下所示：
#main {
border: 1px dotted #f0f;
padding: 1em;
display: flex;
flex-direction: row-reverse;
}
在瀏覽器中打開示例頁面，頁面中所有樣式類名為content的div元素的排列方式被修改為從容器元素柔纵，即id屬性值為main的div元素的右端開始橫向反向排列缔杉，如下圖所示。
接下來首先恢復(fù)所有樣式類名為content的div元素的排列方式為橫向正向排列搁料，修改id屬性值為main的div元素的樣式代碼如下所示：
#main {
border: 1px dotted #f0f;
padding: 1em;
display: flex;
}
然后對所有樣式類名為content的div元素指定flex-direction: column-reverse;樣式屬性或详，代碼如下所示：
.content {
border: 1px dotted #0ff;
padding: 1em;
display: flex;
flex-direction: column-reverse;
}
在瀏覽器中打開示例頁面系羞，頁面中所有content的div元素的所有section子元素的排列方式被修改為縱向反向排列（不包含section子元素中的section孫元素），如下圖所示霸琴。
使用order樣式屬性指定排列順序
使用彈性盒布局的時候椒振，可以通過order屬性來改變各元素的顯示順序∥喑耍可以在每個元素的樣式中加入order屬性澎迎，該屬性使用一個表示序號的整數(shù)屬性值，瀏覽器在顯示的時候根據(jù)該序號從小到大來顯示這些元素选调。
接下來首先設(shè)置所有樣式類名為content的div元素的所有section子元素的排列方式為縱向正向排列夹供，修改所有樣式類名為content的div元素的樣式代碼如下所示：
.content {
border: 1px dotted #0ff;
padding: 1em;
display: flex;
flex-direction: column;
}
接下來通過將所有樣式類名為content的div元素中的第2個section子元素的order樣式屬性值設(shè)置為-1的方法設(shè)置這些section子元素被優(yōu)先顯示在其他section子元素之前，代碼如下所示：
.content section:nth-child(2) {
order: -1;
}
在瀏覽器中打開示例頁面学歧，頁面中所有樣式類名為content的div元素中的第2個section子元素被顯示在其他section子元素之前，如下圖所示各吨。
設(shè)置元素寬度及高度
接下來首先介紹如何設(shè)置被橫向排列的每一個元素的寬度枝笨。
可以通過flex屬性值的使用使所有子元素的總寬度等于容器寬度。
接下來通過將所有樣式類名為content的div元素的flex屬性值設(shè)置為1的方法使所有樣式類名為content的div元素的總寬度等于容器元素揭蜒，即id屬性值為main的div元素的寬度横浑，代碼如下所示。當(dāng)所有樣式類名為content的div元素的flex屬性值都被設(shè)置為1時屉更，這些div元素的寬度均等徙融。
.content {
border: 1px dotted #0ff;
padding: 1em;
display: flex;
flex-direction: column;
flex:1;
}
在瀏覽器中打開示例頁面，所有樣式類名為content的div元素的寬度自動增長瑰谜，這些元素的總寬度等于容器元素欺冀，即id屬性值為main的div元素的寬度,每一個樣式類名為content的div元素的寬度均等，如下圖所示萨脑。
接下來隐轩，我們設(shè)置第二個樣式類名為content的div元素的flex屬性值為2，代碼如下所示渤早。
.content:nth-child(2) {
flex:2;
}
為了更清晰地計算元素寬度职车，我們?nèi)∠性氐倪吙蛟O(shè)置及內(nèi)邊距設(shè)置，修改后的完整樣式代碼如下所示鹊杖。
<style>
#main {
display: flex;
}
.content {
display: flex;
flex-direction: column;
flex:1;
}
.content section:nth-child(2) {
order: -1;
}
.content:nth-child(2) {
flex:2;
}
</style>
在瀏覽器中打開示例頁面悴灵，第二個樣式類名為content的div元素寬度為其他樣式類名為content的div元素寬度的兩倍，假設(shè)這些元素的容器元素骂蓖，即id屬性值為main的div元素的寬度等于600px积瞒，則第一個與第三個樣式類名為content的div元素寬度的寬度均等于150px，第二個樣式類名為content的div元素寬度的寬度等于300px登下。
可以使用flex-grow屬性來指定元素寬度赡鲜，但是該樣式屬性對于元素寬度的計算方法與flex樣式屬性對于元素寬度的計算方法有所不同空厌。
接下來指定所有樣式類名為content的div元素的flex-grow樣式屬性值為1，寬度為150px,指定第二個樣式類名為content的div元素的flex-grow樣式屬性值為為3银酬。修改后的完整樣式代碼如下所示嘲更。
<style>
#main {
display: flex;
}
.content {
display: flex;
flex-direction: column;
width:150px;
flex-grow:1;
}
.content section:nth-child(2) {
order: -1;
}
.content:nth-child(2) {
flex-grow:3;
}
</style>
在瀏覽器中打開示例頁面，假設(shè)這些元素的容器元素揩瞪，即id屬性值為main的div元素的寬度等于600赋朦，則第一個與第三個樣式類名為content的div元素寬度的寬度均等于180px，第二個樣式類名為content的div元素寬度的寬度等于240px李破。對于每個樣式類名為content的div元素寬度的計算步驟如下所示：
- 600(容器寬度)-150*3（三個樣式類名為content的div元素寬度的總寬度）=150
- 150/5(三個樣式類名為content的div元素寬度的flex-grow樣式屬性值的總和)=30
- 第一個與第三個樣式類名為content的div元素寬度的寬度均等于150（其width樣式屬性值+）+30*1（其flew-grow樣式屬性值）=180px
- 第二個樣式類名為content的div元素寬度的寬度等于150（其width樣式屬性值+）+30*3（其flew-grow樣式屬性值）=240px
可以使用flex-shrink屬性來指定元素寬度宠哄，該樣式屬性與flex-grow樣式屬性的區(qū)別在于：當(dāng)子元素的width樣式屬性值的總和小于容器元素的寬度值時，必須通過flex-grow樣式屬性來調(diào)整子元素寬度嗤攻，當(dāng)子元素的width樣式屬性值的總和大于容器元素的寬度值時毛嫉，必須通過flex-shrink樣式屬性來調(diào)整子元素寬度。
接下來指定所有樣式類名為content的div元素的flex-shrink樣式屬性值為1妇菱，寬度為250px,指定第二個樣式類名為content的div元素的flex-shrink樣式屬性值為為3承粤。修改后的完整樣式代碼如下所示。
<style>
#main {
display: flex;
}
.content {
display: flex;
flex-direction: column;
width:250px;
flex-shrink:1;
}
.content section:nth-child(2) {
order: -1;
}
.content:nth-child(2) {
flex-shrink:3;
}
</style>
在瀏覽器中打開示例頁面闯团，假設(shè)這些元素的容器元素辛臊，即id屬性值為main的div元素的寬度等于600，則第一個與第三個樣式類名為content的div元素寬度的寬度均等于220px房交，第二個樣式類名為content的div元素寬度的寬度等于160px彻舰。對于每個樣式類名為content的div元素寬度的計算步驟如下所示：
- 250*3（三個樣式類名為content的div元素寬度的總寬度）-600(容器寬度)=150
- 150/5(三個樣式類名為content的div元素寬度的flex-shrink樣式屬性值的總和)=30
- 第一個與第三個樣式類名為content的div元素寬度的寬度均等于250（其width樣式屬性值+）-30*1（其flew-shrink樣式屬性值）=220px
- 第二個樣式類名為content的div元素寬度的寬度等于250（其width樣式屬性值+）-30*3（其flew-grow樣式屬性值）=160px
在使用flex-grow樣式屬性或flex-shrink樣式屬性調(diào)整子元素寬度時，也可以使用flex-basis樣式屬性指定調(diào)整前的子元素寬度候味，該樣式屬性與width樣式屬性的作用完全相同刃唤。
可以將flex-grow、flex-shrink以及flex-basis樣式屬性值合并寫入flex樣式屬性中白群，方法如下所示透揣。
flex:flex-grow樣式屬性值 flex-shrink樣式屬性值 flex-basis樣式屬性值;
在使用flex樣式屬性值時，flex-grow川抡、flex-shrink以及flex-basis樣式屬性值均為可選用樣式屬性值辐真，當(dāng)不指定flex-grow、flex-shrink樣式屬性值時崖堤，默認樣式屬性值均為1侍咱，當(dāng)不指定flex-basis樣式屬性值時，默認樣式屬性值為0px密幔。
修改本示例中的樣式代碼如下所示：
<style>
#main {
display: flex;
}
.content {
display: flex;
flex-direction: column;
width:250px;
flex:250px;
}
.content section:nth-child(2) {
order: -1;
}
.content:nth-child(2) {
flex:1 3 250px;
}
</style>
在瀏覽器中打開示例頁面楔脯，假設(shè)這些元素的容器元素，即id屬性值為main的div元素的寬度等于600胯甩，則第一個與第三個樣式類名為content的div元素寬度的寬度均等于220px昧廷，第二個樣式類名為content的div元素寬度的寬度等于160px堪嫂。
在子元素為橫向排列時，flex木柬、flex-grow皆串、flex-shrink以及flex-basis樣式屬性均用于指定或調(diào)整子元素寬度，當(dāng)子元素為縱向排列時眉枕，flex恶复、flex-grow、flex-shrink以及flex-basis樣式屬性均用于指定或調(diào)整子元素高度速挑。
單行布局與多行布局
可以使用flex-wrap樣式屬性來指定單行布局或多行布局谤牡，可指定樣式屬性值如下所示：
- nowrap:不換行
- wrap:換行
- wrap-reverse:雖然換行，但是換行方向與使用
- wrap樣式屬性值時的換行方向相反
接下來首先恢復(fù)頁面內(nèi)各div元素的邊框與內(nèi)邊距(padding)的指定姥宝，同時指定所有樣式類名為content的div元素的寬度為250px翅萤，代碼如下所示。
<style>
#main {
border: 1px dotted #f0f;
padding: 1em;
display: flex;
}
.content {
border: 1px dotted #0ff;
padding: 1em;
display: flex;
flex-direction: column;
flex:250px;
}
section {
border: 1px dotted #f00;
padding: 1em;
}
.content section:nth-child(2) {
order: -1;
}
</style>
然后指定容器元素腊满，即id屬性值為main的div元素的flex-wrap樣式屬性值為wrap套么，以指定允許對所有樣式類名為content的div元素進行換行布局，代碼如下所示糜烹。
#main {
border: 1px dotted #f0f;
padding: 1em;
display: flex;
flex-wrap: wrap;
}
在瀏覽器中打開示例頁面违诗，當(dāng)瀏覽器窗口寬度不足以容納三個樣式類名為content的div元素時漱凝，最右邊的樣式類名為content的div元素被換行顯示疮蹦，如下圖所示。
可以將flex-direction樣式屬性值與flex-wrap樣式屬性值合并書寫在flex-flow樣式屬性中茸炒。以下兩段代碼的作用完全相同愕乎。
//使用flex-direction樣式屬性與flex-wrap樣式屬性
.content {
flex-direction: row;
flex-wrap: wrap;
}
//使用flex-flow樣式屬性
.content {
flex-flow: row wrap;
}
彈性盒布局中的一些專用術(shù)語
接下來首先介紹彈性盒布局中的一些專用術(shù)語，在進行布局時這些術(shù)語的含義如下圖所示壁公。
- main axis:進行布局時作為布局基準(zhǔn)的軸感论，在橫向布局時為水平軸，在縱向布局時為垂直軸紊册。
- main-start / main-end:進行布局時的布局起點與布局終點比肄。在橫向布局時為容器的左端與右端，在縱向布局時為容器的頂端與底端囊陡。
- cross axis:與main axis垂直相交的軸芳绩，在橫向布局時為垂直軸，在縱向布局時為水平軸撞反。
- cross-start / cross-end:cross axis軸的起點與終點妥色。在橫向布局時為容器的頂端與底端，在縱向布局時為容器的左端與右端遏片。將flex-wrap屬性值指定為wrap且進行橫向多行布局時嘹害，按從cross-start到cross-end方向撮竿，即從上往下布局，將flex-wrap屬性值指定為wrap-reverse且進行橫向多行布局時笔呀，按從cross-end到cross-start方向幢踏，即從下往上布局。
justify-content屬性
justify-content屬性用于指定如何布局容器中除了子元素之外的main axis軸方向（橫向布局時main axis軸方向為水平方向凿可，縱向布局時main axis軸方向為垂直方向）上的剩余空白部分惑折。
當(dāng)flex-grow屬性值不為0時，各子元素在main axis軸方向上自動填滿容器枯跑，所以justify-content屬性值無效惨驶。
可指定justify-content屬性值如下所示：
- flex-start：從main-start開始布局所有子元素（默認值）。
- flex-end：從main-end開始布局所有子元素敛助。
- center：居中布局所有子元素粗卜。
- space-between：將第一個子元素布局在-main-start處令野，將最后一個子元素布局在main-end處踱启，將空白部分平均分配在所有子元素與子元素之間。
- space-around：將空白部分平均分配在以下幾處：main-start與第一個子元素之間钠四、各子元素與子元素之間焕数、最后一個子元素與main-end之間纱昧。
上述各屬性值的區(qū)別如下圖所示(灰色代表空白部分)。
align-items屬性與align-self屬性
align-items屬性與justify-content屬性類似堡赔，用于指定子元素的對齊方式识脆，但是align-items屬性指定的是cross axis軸方向（橫向布局時cross axis軸方向為垂直方向，縱向布局時cross axis軸方向為水平方向）上的對齊方式善已，可指定屬性值如下所示灼捂。
- flex-start：從cross-start開始布局所有子元素（默認值）。
- flex-end：從cross-end開始布局所有子元素换团。
- center：居中布局所有子元素悉稠。
- baseline：如果子元素的布局方向與容器的布局方向不一致，則該值的作用等效于flex-start屬性值的作用艘包。如果子元素的布局方向與容器的布局方向保持一致的猛，則所有子元素中的內(nèi)容沿基線對齊。
- stretch：同一行中的所有子元素高度被調(diào)整為最大想虎。如果未指定任何子元素高度卦尊，則所有子元素高度被調(diào)整為最接近容器高度（當(dāng)考慮元素邊框及內(nèi)邊距時，當(dāng)邊框?qū)挾扰c內(nèi)邊距均為0則等于容器高度）磷醋。
上述各屬性值的區(qū)別如下圖所示(灰色代表空白部分)猫牡。
align-self屬性與align-items屬性的區(qū)別在于：align-items被指定為容器元素的樣式屬性，用于指定所有子元素的對齊方式邓线，而align-self屬性被指定為某些子元素的樣式屬性淌友，用于單獨指定這些子元素的對齊方式煌恢。例如將容器元素的align-items屬性值指定為center（居中對齊）后，可以將第一個子元素的align-self屬性值指定為flex-start（對齊在cross-start端）震庭」宓郑可指定值如下所示：
- auto:繼承父元素的align-items屬性值
- flex-start
- flex-end
- center
- baseline
- stretch
align-content屬性
當(dāng)進行多行布局時，可以使用align-content屬性來指定各行對齊方式器联。該屬性與align-items屬性的區(qū)別在于：align-items屬性用于指定子元素的對齊方式二汛，而align-content屬性用于指定行對齊方式〔ν兀可以指定的屬性值如下所示：
- flex-start：從cross-start開始布局所有行肴颊。
- flex-end：從cross-end開始布局所有行。
- center：居中布局所有行渣磷。
- space-between：將第一行布局在cross-start處婿着，將最后一行布局在cross-end處，將空白部分平均分配在各行之間醋界。
- space-around：將空白部分平均分配在以下幾處：cross-start與第一行之間竟宋、各行與行之間、最后一行與cross-end之間形纺。
上述各屬性值的區(qū)別如下圖所示(灰色代表空白部分)丘侠。
