<div class="flex-content"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div>
.flex-content{ display: flex; display: -webkit-flex; } .flex-item{ width: 30%; height: 90%; }
在這里，我們定義了一個flex容器以及三個flex項目（其他細節未給出詳細代碼），下面是效果圖：
默認情況下：flex-item是橫向從左到右排列在flex-content中的，不管item有多少項，未設置換行就只排列在一行中，不會換行。
下面是增加一個flex-item的效果：
在CSS中,flex-item的寬是設置了30%，但在此時失效了。因為flex-content的寬度不足以容納第4個item。此時為了保持默認特性（不換行），只能將item平分容器的寬度，即我們所看到的。
理解了項目在容器中的默認特性后就可以跟容易理解容器屬性及項目屬性了
容器屬性
顧名思義是定義在flex容器中的屬性，容器屬性定義了容器中所有的項目應有的行為及表現。有以下6個屬性：
1.flex-direction
定義項目在容器中排列的方向，有4種屬性值：row | row-reverse | column | column-reverse
.flex-content{flex-direction:row|row-reverse|column|column-reverse}
從前面我們可以了解到，item在容器中默認是橫向從左到右排列的。除此之外，我們還可以將它設置為橫向從右到左(row-reverse)、縱向從上到下(column)、縱向從下到上(column-reverse)
1.1 row（默認值） ,項目從左到右排列 .flex-content{flex-direction:row}
1.2 row-reverse,項目反向排列（從右到左） .flex-content{flex-direction:row-reverse}
1.3 column,項目縱向排列，從上到下 .flex-content{flex-direction:column}
1.4 column,項目從下到上排列 .flex-content{flex-direction:column-reverse}
2.flex-wrap
定義了容器中的項目在容器寬度不足以容納項目時是否換換行。
在這里我們給flex-item的寬定義為22%，即容器中在不改變item寬的以及不換行的情況下最多能容納4個item：
2.1 nowrap(默認值)，item在容器中不換行,但item所設置的width可能失效。 .flex-content{flex-wrap:nowrap}
可以看到，增加一個item后，若item不該變原來寬度(22%)時，容器將裝不下item5。為了使item5能被容器裝下且不換行，所有的item均分了容器的寬度。此時，item的width失效，不再是22%。
2.2 wrap,item寬度不改變，容納不下新增item時，自動換行。 .flex-content{flex-wrap:wrap}
此時item的width仍為22%。
2.3 wrap-reverse,反向換行，正常情況下換行是空間不夠時向下換行，而wrap-reverse是空間不夠時向上換行。 .flex-content{flex-wrap:wrap-reverse}
3.flex-flow
是flex-direction與flex-wrap的簡寫形式 .flex-contetn{flex-flow:<flex-direction> <flex-wrap>}
.flex-content{ flex-flow:row wrap; } //相當於 .flex-content{ flex-direction:row; flex-wrap:wrap; }
4.justify-content
定義了項目的水平方向對齊方式，有5種屬性值flex-start | flex-end | center | space-between | space-around
4.1 flex-start 項目左對齊 justify-content: flex-start
4.2 flex-end 項目右對齊 justify-content: flex-end
4.3 center 項目居中對齊 justify-content: center
4.4 space-between 項目兩端對齊 justify-content: space-between
4.5 space-around 每一個項目的左右間隔都相等，相當於自動計算margin值 justify-content: space-around
在這里每個item的左右margin值都是一樣的，假設都是20px。則item1的左邊到邊框有20px的距離，item1與item2之間有40px的距離。
5.align-items
這個屬性與justify-content恰好相反，align-items定義了項目的豎直方向對齊方式。其屬性值有flex-start | flex-end | center | baseline | strectch
5.1 flex-start 項目頂端對齊 align-items: flex-start
5.2 flex-end 項目底端對齊 align-items: flex-end
5.3 center 項目居中對齊 align-items: center
5.4 baseline 基於項目中第一行文字的基線對齊 align-items: baseline
5.5 stretch 拉伸，占滿整行高度 align-items: stretch
項目高度被拉伸填充滿flex容器的內容高度，注意，若項目被設置了固定高度，則不會被拉伸
6. align-content 定義了flex容器中有多行item時item的對齊方式。如果只有一行item，則此屬性不起作用。
如之前說的，flex容器在沒有顯式地設置 flex-wrap:wrap; 時，默認是不換行的，即item只排列在一行。而align-content這個屬性是要超過兩行的item時才會生效。
6.1 flex-start 多行項目頂端對齊。 align-content:flex-start
注意，換行后如果為聲明 align-content:flex-start 的話行與行之間會有一個較大空隙。如下圖
6.2 flex-end 多行項目底端對齊。 align-content:flex-end
6.3 center 多行項目居中對齊。 align-content:center
6.4 stretch 多行項目豎直方向均勻填充滿flex容器。 align-content:stretch
注意：如果給item設置了height則不會進行拉伸。
6.5 space-between 多行項目兩端對齊。 align-content:space-between
6.6 space-around 多行項目自動計算項目行間距。 align-content:space-around
此處的間距都是自動計算的，並未設置任何margin值。
項目屬性
項目屬性作用於容器中的單個項目，可認為是個性化項目的一個屬性
1.order 定義了項目的排列順列，order的值越小，項目的排列位置越靠前。默認值為0。
.item1{ order:3; } .item2{ order:1; } .item3{ order:2; }
2. flex-grow 定義了項目的放大比例，默認值為0，表示不放大。
.item1{ flex-grow: 0; } .item2{ flex-grow: 2; } .item3{ flex-grow: 3; }
在這里依次給item的flex-grow的值設置為0、2、3。其中0表示item的默認寬度，並沒有放大。2、3表示將剩余的空間分為2+3=5份，其中item2占2/5份，item3占3/5份。
3. flex-shrink 定義了項目的縮小比例。默認值為1，表示當空間不足時將項目縮小至能被空間容納
flex-shrink的值必須大於或等於0。當值為負數時，此值無效，相當於默認值。當值為0時，表示項目不縮放。值為1時，項目縮放。在這里，item的寬都被設置為50%，但是因為item1的flex-shrink值為0，所以不會被縮放，item2、item3的flex-shrink值為1，flex容器容納不下時縮小了。
這里有個問題，當flex-shrink的值大於1時是怎樣計算的呢，請看這里
.item1{ flex-shrink: 0; } .item2{ flex-shrink: 1; } .item3{ flex-shrink: 1; }
4. flex-basis 定義了flex items 在被放進一個flex容器之前的大小(flex-basis含義)。默認值為auto。
通過flex-basis的含義可以很直觀的感覺到flex-basis的作用跟width似乎一樣。但是兩者是有區別的，盡管兩者都可以設置item的寬，但在flex容器中flex-basis的優先級高於width，即兩者同時存在時，width會被屏蔽，無論代碼中兩者的先后順序如何。
.item{ flex-basis:150px; width:180px; }
可以看到，item的寬慰150px，即width被屏蔽。
有關flex-basis的更多，請參考這里
5. flex 是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。flex-shrink和flex-basis是可選屬性。
6. align-self 定義了單個項目的豎直方向對齊方式，默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.flex-content{ align-items:flex-start; } .item2{ align-self:flex-end; }
item1、item3未設置align-self，其默認值為auto，所以繼承了父元素的flex-start保持頂端對齊。而item設置了align-self為flex-end，固item2是底端對齊的。
總結：
在理解記憶的時候，一定要按照容器屬性以及項目屬性的方向去思考
容器屬性：
1.flex-direction（方向）
2.flex-wrap（換行）
3.flex-flow（方向、換行的簡寫）
4.justify-content（水平方向對齊）
5.align-items（豎直方向對齊）
6.align-content（多行對齊）
項目屬性：
1.order（順序）
2.flex-grow（放大）
3.flex-shrink（縮小）
4.flex-basis（寬）
5.flex（放大、縮小、寬的簡寫）
6.align-self （單個豎直方向對齊）