css3中flexbox伸縮盒深入理解

 這個背後有一個悲傷的故事，所以就取了個這麼有點像標題黨的標題，具體什麼我就不說了。很早之前就知道css3裡面有這麼個東西，而且隨著規范的改變，它的版本也改了幾次。

   

也就是因為這個flexbox伸縮盒布局太強大了，以至於我沒在意它也是display的一個屬性。

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

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

可以看到，目前最新的版本是display:flex ;當然要是用以前過度版本的估計還有用，但我們還是跟著最新的規范來。

我們再了解下伸縮盒的定義和一些概念的東西吧：

Flexbox(伸縮布局盒) 是 CSS3 中一個新的布局模式，為了現代網絡中更為復雜的網頁需求而設計。

雖然現在我們可以使用 Flexbox 輕松創建布局，而不會像以前那樣難以理解，但我們仍然需要花一些時間去熟悉到底如何使用 Flexbox。新的術語和概念可能會是我們使用 Flexbox 時的一個障礙，所以讓我們先來了解以下它們。

Flexbox 由 伸縮容器 和 伸縮項目 組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素，而設置為 inline-flex 的容器則渲染為一個行內元素。

Flexbox 規范的相關工作已經進展了3年。不同的浏覽器也實現了不同的實驗版本。在2012年9月，Flexbox 語法的第三個主要修訂版本進入到候選推薦階段。這意味著 W3C 認為當前的語法是穩定的，並鼓勵浏覽器開發商去實現它。總之，伸縮盒布局，是我見過的最操蛋的規范，從2009發布到去年最終定下來，更弦換轍了三次。

Flexbox 規范時間表：

    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 已經被浏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ 已經支持了本文中所描述的 Flexbox。Firefox 18 和 Blackberry 10 也很快就會實現。我推薦大家使用已經支持的浏覽器來閱讀本文和查看例子。雖然如此，但是很多浏覽器廠商都高了一個私有前綴，所以特別麻煩：

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;

}

 

我們再來看看它有哪些屬性:
Properties
屬性  CSS Version
版本  Inherit From Parent
繼承性  Description
簡介
flex  CSS3  無  復合屬性。設置或檢索伸縮盒對象的子元素如何分配空間。
flex-grow  CSS3  無  設置或檢索彈性盒的擴展比率。
flex-shrink  CSS3  無  設置或檢索彈性盒的收縮比率
flex-basis  CSS3  無  設置或檢索彈性盒伸縮基准值。
flex-flow  CSS3  無  復合屬性。設置或檢索伸縮盒對象的子元素排列方式。
flex-direction  CSS3  無  設置或檢索伸縮盒對象的子元素在父容器中的位置。
flex-wrap  CSS3  無  設置或檢索伸縮盒對象的子元素超出父容器時是否換行。
align-content  CSS3  無  設置或檢索彈性盒堆疊伸縮行的對齊方式。
align-items  CSS3  無  設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。
align-self  CSS3  無  設置或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。
justify-content  CSS3  無  設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。
order  CSS3  無  設置或檢索伸縮盒對象的子元素出?的?序。
1:flex

取值:

none：none關鍵字的計算值為: 0 0 auto

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

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

[ flex-basis ]：定義彈性盒子元素的默認基准值。

這裡flex-grow,flex-shrink,flex-basis可以單獨使用例如:flex-grow:1，也可以幾個在一起縮寫使用，例如：flex:1 1 100px;表示不擴展也不伸縮，設置寬度為100px。

看一個DEMO:

這裡面一開始定義了每個Box 400px,所以第一個每個小塊都是133px.第二個box(box2)由於每個塊都設置了擴展和伸縮比率還有基准值100px。這裡我們可以計算得:100+100+100=300px，但是因為它的ID設置了寬度為400px,所以會空出100px，但是它還有設置了擴展比率，所以計算得:100*1+100*2+100*3=600px;，最後我們可以算出每個小塊將要增加的寬度:

第一個：1*100/600*100約等於17px;

第二個小塊：2*100/600*100約等於33px;

第三個小塊:3*100/600*100等於50px

也就是說box2裡第一塊區域的寬度為117px,第二小塊的寬度為133px,第三個小塊的寬度為150px;

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

flex-flow是個復合屬性，接受這兩類值：[ flex-direction ] [ flex-wrap ]。

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

flex-direction用來定義彈性盒子元素的排列方向。

語法:flex-direction：row | row-reverse | column | column-reverse默認值是row，無繼承性。

row：橫向從左到右排列（左對齊），默認的排列方式。row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。column：縱向排列。row-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

看一個DEMO

再來看看:flex-wrap：nowrap | wrap | wrap-reverse 表示定義彈性盒子元素溢出父容器時是否換行。默認值為nowrap。可取值：nowrap：當子元素溢出父容器時不換行。wrap：當子元素溢出父容器時自動換行。wrap-reverse：反轉 wrap 排列。

看一個DEMO:

現在flex-flow的屬性搞清楚了，我們可以結合兩個來寫一個DEMO:
3.再看看align-content屬性吧：

align-content：flex-start | flex-end | center | space-between | space-around | stretch
用於多行的彈性盒模型容器
各個屬性值的意思：
flex-start： 各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之後的每一行都緊靠住前面一行。
flex-end： 各行向彈性盒容器的結束位置堆疊。彈性盒容