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等樣式屬性進(jìn)行的布局方式的一個主要區(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:橫向排列（默認(rèn)值）
- 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樣式屬性值時，默認(rèn)樣式屬性值均為1，當(dāng)不指定flex-basis樣式屬性值時，默認(rèn)樣式屬性值為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元素進(jìn)行換行布局，代碼如下所示。
#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ù)語，在進(jìn)行布局時這些術(shù)語的含義如下圖所示。
- main axis:進(jìn)行布局時作為布局基準(zhǔn)的軸，在橫向布局時為水平軸，在縱向布局時為垂直軸。
- main-start / main-end:進(jìn)行布局時的布局起點與布局終點。在橫向布局時為容器的左端與右端，在縱向布局時為容器的頂端與底端。
- cross axis:與main axis垂直相交的軸，在橫向布局時為垂直軸，在縱向布局時為水平軸。
- cross-start / cross-end:cross axis軸的起點與終點。在橫向布局時為容器的頂端與底端，在縱向布局時為容器的左端與右端。將flex-wrap屬性值指定為wrap且進(jìn)行橫向多行布局時，按從cross-start到cross-end方向，即從上往下布局，將flex-wrap屬性值指定為wrap-reverse且進(jìn)行橫向多行布局時，按從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開始布局所有子元素（默認(rèn)值）。
- 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開始布局所有子元素（默認(rèn)值）。
- 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)進(jìn)行多行布局時，可以使用align-content屬性來指定各行對齊方式。該屬性與align-items屬性的區(qū)別在于：align-items屬性用于指定子元素的對齊方式，而align-content屬性用于指定行對齊方式?？梢灾付ǖ膶傩灾等缦滤荆?/p>
- flex-start：從cross-start開始布局所有行。
- flex-end：從cross-end開始布局所有行。
- center：居中布局所有行。
- space-between：將第一行布局在cross-start處，將最后一行布局在cross-end處，將空白部分平均分配在各行之間。
- space-around：將空白部分平均分配在以下幾處：cross-start與第一行之間、各行與行之間、最后一行與cross-end之間。
上述各屬性值的區(qū)別如下圖所示(灰色代表空白部分)。
