css3中flexbox伸縮盒深入理解

 這個(gè)背后有一個(gè)悲傷的故事，所以就取了個(gè)這么有點(diǎn)像標(biāo)題黨的標(biāo)題，具體什么我就不說(shuō)了。很早之前就知道css3里面有這么個(gè)東西，而且隨著規(guī)范的改變，它的版本也改了幾次。

也就是因?yàn)檫@個(gè)flexbox伸縮盒布局太強(qiáng)大了，以至于我沒(méi)在意它也是display的一個(gè)屬性。

要想解決這個(gè)布局問(wèn)題，我們還是先了解一些基礎(chǔ)的問(wèn)題。先回顧下display有哪些屬性吧：

    none：隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間
    inline：指定對(duì)象為內(nèi)聯(lián)元素。block：指定對(duì)象為塊元素。
    list-item：指定對(duì)象為列表項(xiàng)目。inline-block：指定對(duì)象為內(nèi)聯(lián)塊元素。（CSS2）
    table：指定對(duì)象作為塊元素級(jí)的表格。類同于html標(biāo)簽<table>（CSS2）
    inline-table：指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格。類同于html標(biāo)簽<table>（CSS2）
    table-caption：指定對(duì)象作為表格標(biāo)題。類同于html標(biāo)簽<caption>（CSS2）
    table-cell：指定對(duì)象作為表格單元格。類同于html標(biāo)簽<td>（CSS2）
    table-row：指定對(duì)象作為表格行。類同于html標(biāo)簽<tr>（CSS2）
    table-row-group：指定對(duì)象作為表格行組。類同于html標(biāo)簽<tbody>（CSS2）
    table-column：指定對(duì)象作為表格列。類同于html標(biāo)簽<col>（CSS2）
    table-column-group：指定對(duì)象作為表格列組顯示。類同于html標(biāo)簽<colgroup>（CSS2）
    table-header-group：指定對(duì)象作為表格標(biāo)題組。類同于html標(biāo)簽<thead>（CSS2）
    table-footer-group：指定對(duì)象作為表格腳注組。類同于html標(biāo)簽<tfoot>（CSS2）
    run-in：根據(jù)上下文決定對(duì)象是內(nèi)聯(lián)對(duì)象還是塊級(jí)對(duì)象。（CSS3）
    box：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
    inline-box：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
    flexbox：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒過(guò)渡版本）（CSS3）
    inline-flexbox：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒過(guò)渡版本）（CSS3）
    flex：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
    inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

可以看到，目前最新的版本是display:flex ;當(dāng)然要是用以前過(guò)度版本的估計(jì)還有用，但我們還是跟著最新的規(guī)范來(lái)。

我們?cè)倭私庀律炜s盒的定義和一些概念的東西吧：

Flexbox(伸縮布局盒) 是 CSS3 中一個(gè)新的布局模式，為了現(xiàn)代網(wǎng)絡(luò)中更為復(fù)雜的網(wǎng)頁(yè)需求而設(shè)計(jì)。

雖然現(xiàn)在我們可以使用 Flexbox 輕松創(chuàng)建布局，而不會(huì)像以前那樣難以理解，但我們?nèi)匀恍枰ㄒ恍r(shí)間去熟悉到底如何使用 Flexbox。新的術(shù)語(yǔ)和概念可能會(huì)是我們使用 Flexbox 時(shí)的一個(gè)障礙，所以讓我們先來(lái)了解以下它們。

Flexbox 由 伸縮容器 和 伸縮項(xiàng)目 組成。通過(guò)設(shè)置元素的 display 屬性為 flex 或 inline-flex 可以得到一個(gè)伸縮容器。設(shè)置為 flex 的容器被渲染為一個(gè)塊級(jí)元素，而設(shè)置為 inline-flex 的容器則渲染為一個(gè)行內(nèi)元素。

Flexbox 規(guī)范的相關(guān)工作已經(jīng)進(jìn)展了3年。不同的瀏覽器也實(shí)現(xiàn)了不同的實(shí)驗(yàn)版本。在2012年9月，F(xiàn)lexbox 語(yǔ)法的第三個(gè)主要修訂版本進(jìn)入到候選推薦階段。這意味著 W3C 認(rèn)為當(dāng)前的語(yǔ)法是穩(wěn)定的，并鼓勵(lì)瀏覽器開發(fā)商去實(shí)現(xiàn)它?？傊?，伸縮盒布局，是我見過(guò)的最操蛋的規(guī)范，從2009發(fā)布到去年最終定下來(lái)，更弦換轍了三次。

Flexbox 規(guī)范時(shí)間表：

    2009年7月 工作草案 (display: box;)
    2011年3月 工作草案 (display: flexbox;)
    2011年11月 工作草案 (display: flexbox;)
    2012年3月 工作草案 (display: flexbox;)
    2012年6月 工作草案 (display: flex;)
    2012年9月 候選推薦 (display: flex;)

Flexbox 已經(jīng)被瀏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ 已經(jīng)支持了本文中所描述的 Flexbox。Firefox 18 和 Blackberry 10 也很快就會(huì)實(shí)現(xiàn)。我推薦大家使用已經(jīng)支持的瀏覽器來(lái)閱讀本文和查看例子。雖然如此，但是很多瀏覽器廠商都高了一個(gè)私有前綴，所以特別麻煩：

div{

      display: -webkit-box;

      display: -moz-box;

      display: -o-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: -moz-flex;

      display: -ms-flex;

      display: -o-flex;

      display: flex;

}

我們?cè)賮?lái)看看它有哪些屬性:
Properties
屬性  CSS Version
版本  Inherit From Parent
繼承性  Description
簡(jiǎn)介
flex  CSS3  無(wú)  復(fù)合屬性。設(shè)置或檢索伸縮盒對(duì)象的子元素如何分配空間。
flex-grow  CSS3  無(wú)  設(shè)置或檢索彈性盒的擴(kuò)展比率。
flex-shrink  CSS3  無(wú)  設(shè)置或檢索彈性盒的收縮比率
flex-basis  CSS3  無(wú)  設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。
flex-flow  CSS3  無(wú)  復(fù)合屬性。設(shè)置或檢索伸縮盒對(duì)象的子元素排列方式。
flex-direction  CSS3  無(wú)  設(shè)置或檢索伸縮盒對(duì)象的子元素在父容器中的位置。
flex-wrap  CSS3  無(wú)  設(shè)置或檢索伸縮盒對(duì)象的子元素超出父容器時(shí)是否換行。
align-content  CSS3  無(wú)  設(shè)置或檢索彈性盒堆疊伸縮行的對(duì)齊方式。
align-items  CSS3  無(wú)  設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式。
align-self  CSS3  無(wú)  設(shè)置或檢索彈性盒子元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式。
justify-content  CSS3  無(wú)  設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。
order  CSS3  無(wú)  設(shè)置或檢索伸縮盒對(duì)象的子元素出?的?序。
1:flex

取值:

none：none關(guān)鍵字的計(jì)算值為: 0 0 auto

[ flex-grow ]：定義彈性盒子元素的擴(kuò)展比率。

[ flex-shrink ]：定義彈性盒子元素的收縮比率。

[ flex-basis ]：定義彈性盒子元素的默認(rèn)基準(zhǔn)值。

這里flex-grow,flex-shrink,flex-basis可以單獨(dú)使用例如:flex-grow:1，也可以幾個(gè)在一起縮寫使用，例如：flex:1 1 100px;表示不擴(kuò)展也不伸縮，設(shè)置寬度為100px。

看一個(gè)DEMO:

這里面一開始定義了每個(gè)Box 400px,所以第一個(gè)每個(gè)小塊都是133px.第二個(gè)box(box2)由于每個(gè)塊都設(shè)置了擴(kuò)展和伸縮比率還有基準(zhǔn)值100px。這里我們可以計(jì)算得:100+100+100=300px，但是因?yàn)樗腎D設(shè)置了寬度為400px,所以會(huì)空出100px，但是它還有設(shè)置了擴(kuò)展比率，所以計(jì)算得:100*1+100*2+100*3=600px;，最后我們可以算出每個(gè)小塊將要增加的寬度:

第一個(gè)：1*100/600*100約等于17px;

第二個(gè)小塊：2*100/600*100約等于33px;

第三個(gè)小塊:3*100/600*100等于50px

也就是說(shuō)box2里第一塊區(qū)域的寬度為117px,第二小塊的寬度為133px,第三個(gè)小塊的寬度為150px;

同樣的算法你可以去試試box3的各個(gè)寬度。
2.flex-flow

flex-flow是個(gè)復(fù)合屬性，接受這兩類值：[ flex-direction ] [ flex-wrap ]。

要不我們先熟悉下flex-direction和flex-wrap吧

flex-direction用來(lái)定義彈性盒子元素的排列方向。

語(yǔ)法:flex-direction：row | row-reverse | column | column-reverse默認(rèn)值是row，無(wú)繼承性。

row：橫向從左到右排列（左對(duì)齊），默認(rèn)的排列方式。row-reverse：反轉(zhuǎn)橫向排列（右對(duì)齊，從后往前排，最后一項(xiàng)排在最前面。column：縱向排列。row-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項(xiàng)排在最上面。

看一個(gè)DEMO

再來(lái)看看:flex-wrap：nowrap | wrap | wrap-reverse 表示定義彈性盒子元素溢出父容器時(shí)是否換行。默認(rèn)值為nowrap?？扇≈担簄owrap：當(dāng)子元素溢出父容器時(shí)不換行。wrap：當(dāng)子元素溢出父容器時(shí)自動(dòng)換行。wrap-reverse：反轉(zhuǎn) wrap 排列。

看一個(gè)DEMO:

現(xiàn)在flex-flow的屬性搞清楚了，我們可以結(jié)合兩個(gè)來(lái)寫一個(gè)DEMO:
3.再看看align-content屬性吧：

align-content：flex-start | flex-end | center | space-between | space-around | stretch
用于多行的彈性盒模型容器
各個(gè)屬性值的意思：
flex-start： 各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側(cè)軸起始邊界緊靠住該彈性盒容器的側(cè)軸起始邊界，之后的每一行都緊靠住前面一行。
flex-end： 各行向彈性盒容器的結(jié)束位置堆疊。彈性盒容器中最后一行的側(cè)軸起結(jié)束界緊靠住該彈性盒容器的側(cè)軸結(jié)束邊界，之后的每一行都緊靠住前面一行。
center： 各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時(shí)在彈性盒容器中居中對(duì)齊，保持彈性盒容器的側(cè)軸起始內(nèi)容邊界和第一行之間的距離與該容器的側(cè)軸結(jié)束內(nèi)容邊界與第最后一行之間的距離相等。（如果剩下的空間是負(fù)數(shù)，則各行會(huì)向兩個(gè)方向溢出的相等距離。）
space-between： 各行在彈性盒容器中平均分布。如果剩余的空間是負(fù)數(shù)或彈性盒容器中只有一行，該值等效于’flex-start’。在其它情況下，第一行的側(cè)軸起始邊界緊靠住彈性盒容器的側(cè)軸起始內(nèi)容邊界，最后一行的側(cè)軸結(jié)束邊界緊靠住彈性盒容器的側(cè)軸結(jié)束內(nèi)容邊界，剩余的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。
space-around： 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。如果剩余的空間是負(fù)數(shù)或彈性盒容器中只有一行，該值等效于’center’。在其它情況下，各行會(huì)按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時(shí)第一行前面及最后一行后面的空間是其他空間的一半。
stretch： 各行將會(huì)伸展以占用剩余的空間。如果剩余的空間是負(fù)數(shù)，該值等效于’flex-start’。在其它情況下，剩余空間被所有行平分，以擴(kuò)大它們的側(cè)軸尺寸。

看一個(gè)DEMO:
4.align-items

語(yǔ)法：align-items：flex-start | flex-end | center | baseline | stretch
每個(gè)值的意思:
flex-start： 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end： 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center： 彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。
baseline： 如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與’flex-start’等效。其它情況下，該值將參與基線對(duì)齊。
stretch： 如果指定側(cè)軸大小的屬性值為’auto’，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照’min/max-width/height’屬性的限制。

DEMO:
5.align-self
align-self：auto | flex-start | flex-end | center | baseline | stretch默認(rèn)值：auto
適用于：彈性盒模型子元素繼承性：無(wú)
取值：

auto：
    如果’align-self’的值為’auto’，則其計(jì)算值為元素的父元素的’align-items’值，如果其沒(méi)有父元素，則計(jì)算值為’stretch’。
flex-start：
    彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：
    彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：
    彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。
baseline：
    如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與’flex-start’等效。其它情況下，該值將參與基線對(duì)齊。
stretch：
    如果指定側(cè)軸大小的屬性值為’auto’，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照’min/max-width/height’屬性的限制
    DEMO木有了
    6.justify-content

    用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。

        當(dāng)彈性盒里一行上的所有子元素都不能伸縮或已經(jīng)達(dá)到其最大值時(shí)，這一屬性可協(xié)助對(duì)多余的空間進(jìn)行分配。當(dāng)元素溢出某行時(shí)，這一屬性同樣會(huì)在對(duì)齊上進(jìn)行控制。

    語(yǔ)法：

    justify-content：flex-start | flex-end | center | space-between | space-around

    默認(rèn)值：flex-start

    適用于：彈性盒模型容器

    繼承性：無(wú)
    取值：

    flex-start：
        彈性盒子元素將向行起始位置對(duì)齊。該行的第一個(gè)子元素的主起始位置的邊界將與該行的主起始位置的邊界對(duì)齊，同時(shí)所有后續(xù)的伸縮盒項(xiàng)目與其前一個(gè)項(xiàng)目對(duì)齊。
    flex-end：
        彈性盒子元素將向行結(jié)束位置對(duì)齊。該行的第一個(gè)子元素的主結(jié)束位置的邊界將與該行的主結(jié)束位置的邊界對(duì)齊，同時(shí)所有后續(xù)的伸縮盒項(xiàng)目與其前一個(gè)項(xiàng)目對(duì)齊。
    center：
        彈性盒子元素將向行中間位置對(duì)齊。該行的子元素將相互對(duì)齊并在行中居中對(duì)齊，同時(shí)第一個(gè)元素與行的主起始位置的邊距等同與最后一個(gè)元素與行的主結(jié)束位置的邊距（如果剩余空間是負(fù)數(shù)，則保持兩端相等長(zhǎng)度的溢出）。
    space-between：
        彈性盒子元素會(huì)平均地分布在行里。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個(gè)子元素，則該值等效于’flex-start’。在其它情況下，第一個(gè)元素的邊界與行的主起始位置的邊界對(duì)齊，同時(shí)最后一個(gè)元素的邊界與行的主結(jié)束位置的邊距對(duì)齊，而剩余的伸縮盒項(xiàng)目則平均分布，并確保兩兩之間的空白空間相等。
    space-around：
        彈性盒子元素會(huì)平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個(gè)伸縮盒項(xiàng)目，則該值等效于’center’。在其它情況下，伸縮盒項(xiàng)目則平均分布，并確保兩兩之間的空白空間相等，同時(shí)第一個(gè)元素前的空間以及最后一個(gè)元素后的空間為其他空白空間的一半。
        DEMO;

        7.order

        用于設(shè)置或檢索彈性盒模型對(duì)象的子元素出?的?序。

        用法：order：<integer>

        <integer>：用整數(shù)值來(lái)定義排列順序，數(shù)值小的排在前面?？梢詾樨?fù)值。

        DEMO:

上文介紹了flexbox的基本語(yǔ)法和一些屬性的使用，這里我們通過(guò)實(shí)戰(zhàn)來(lái)更了解這個(gè)伸縮盒布局(彈性盒)
我們知道CSS3 彈性盒，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?duì)于很多應(yīng)用來(lái)講，彈性盒在兩個(gè)方面相對(duì)于盒模型進(jìn)行了提升，它既不使用浮動(dòng)，也不會(huì)導(dǎo)致彈性盒容器的外邊距與其內(nèi)容的外邊距之間發(fā)生塌陷。
現(xiàn)在我們?cè)賮?lái)回顧下彈性盒的概念：
彈性盒布局的定義中，它可以自動(dòng)調(diào)整子元素的高和寬，來(lái)很好的填充任何顯示設(shè)備中的可用顯示空間，收縮內(nèi)容防止內(nèi)容溢出。

不同于盒布局的基于垂直方向以及行內(nèi)布局的基于水平方向，彈性盒布局的算法是方向無(wú)關(guān)的。 雖然盒布局在頁(yè)面中工作良好，但是其定義不足以支持那種需要根據(jù)用戶代理從豎直切換成水平等變化而進(jìn)行方向切換、大小調(diào)整、拉伸、收縮的引用組件。不同于將要出現(xiàn)的網(wǎng)格布局針對(duì)目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。這兩種都是CSS工作組為了能與不同用戶代理、不同書寫模式和其他彈性需要進(jìn)行協(xié)作而做出的努力。

我們可以用display:flex和display:inline-flex來(lái)創(chuàng)建彈性盒。flex 值表示彈性容器為塊級(jí)。inline-flex 值表示彈性容器為原子行級(jí)元素 。里面的元素就稱為彈性子元素
彈性子元素的注意事項(xiàng)
包含在彈性容器內(nèi)的文本自動(dòng)成為匿名的彈性子元素。然而，只包含空白的彈性子元素不會(huì)被渲染，就好像它被設(shè)定為 display:none 一樣。

彈性容器的絕對(duì)定位的子元素會(huì)被定位，因此其靜態(tài)位置會(huì)根據(jù)它們的彈性容器的主起始內(nèi)容盒的角落上開始。

目前由于一個(gè)已知的問(wèn)題，在彈性子元素上指定 visibility:collapse
會(huì)導(dǎo)致其好像被指定了 display:none 一樣，但該操作的初衷是使元素具有好像被指定了 visibility:hidden 一樣的效果。在該問(wèn)題被解決之前建議使用visibility:hidden ，其效果在彈性子元素上等同于 visibility:collapse 。

相鄰的彈性子元素不會(huì)發(fā)生外邊距合并。使用 auto 的外邊距會(huì)在垂直和水平方向上帶來(lái)額外的空間，這種性質(zhì)可用于對(duì)齊或分隔臨近的彈性子元素。W3C彈性盒子布局模型的 使用’auto’的外邊距進(jìn)行對(duì)齊 部分有更多信息。
彈性盒子的對(duì)齊會(huì)進(jìn)行真正的居中，不像CSS的其他居中方法。這意味著即使彈性容器溢出，子元素仍然保持居中。有些時(shí)候這可能有問(wèn)題，然而即使溢出了頁(yè)面的 上沿，或左邊沿（在從左到右的語(yǔ)言如英語(yǔ)；這個(gè)問(wèn)題在從右到左的語(yǔ)言中發(fā)生在右邊沿，如阿拉伯文），因?yàn)槟悴荒軡L動(dòng)到那里，即使那里有內(nèi)容！在將來(lái)的版本 中，對(duì)齊屬性會(huì)被擴(kuò)展為有一個(gè)“安全”選項(xiàng)。目前，如果關(guān)心這個(gè)問(wèn)題，你可以使用外邊距來(lái)達(dá)到居中的目的，這種方式比較“安全”，在溢出的情況下會(huì)停止居 中。在你想要居中的彈性子元素上應(yīng)用自動(dòng)外邊距代替align-屬性。在彈性容器的第一個(gè)和最后一個(gè)子元素的外側(cè)應(yīng)用自動(dòng)外邊距來(lái)代替justify-屬性。自動(dòng)外邊距會(huì)伸縮并假定剩余空間，當(dāng)有剩余空間時(shí)居中彈性子元素，沒(méi)有剩余空間時(shí)切換會(huì)正常對(duì)齊模式。然而，如果你想要在多線彈性盒子中用基于外邊距的居中替換justify-content屬性，你可能就沒(méi)那么幸運(yùn)了，因?yàn)槟阈枰诿恳痪€的第一個(gè)和最后一個(gè)元素上應(yīng)用外邊距。除非你能提前預(yù)測(cè)哪個(gè)元素是哪一線上的最后一個(gè)元素，否則你沒(méi)法穩(wěn)定地在主軸上用基于外邊距的居中代替 justify-content 屬性。

說(shuō)起雖然元素的顯示順序與源代碼中的順序無(wú)關(guān)，這種無(wú)關(guān)僅對(duì)顯示效果有效，不包括語(yǔ)音順序和基于源代碼的導(dǎo)航。即使是 order 也不影響語(yǔ)言和導(dǎo)航序列。因此開發(fā)者必須小心排列源代碼中的元素以免破壞文檔的可訪問(wèn)性。
下面我們來(lái)看兩個(gè)例子：

例子展示了如何對(duì)元素應(yīng)用彈性布局以及在彈性布局中子元素的行為

例子2

這個(gè)例子適用于桌面瀏覽器網(wǎng)頁(yè)必須優(yōu)化以適應(yīng)于智能手機(jī)屏幕的場(chǎng)景。不僅僅需要元素減小尺寸，它們排列的順序方式也必須改變。彈性布局很容易實(shí)現(xiàn)這種需求。