Flexbox解決了萬惡的css復雜布局方式。關于彈性盒子，MDN是這樣解釋的：
彈性盒子中的子元素可以在各個方向上進行布局，并且能以彈性尺寸來適應顯示空間。由于元素的顯示順序可以與它們在源代碼中的順序無關，定位子元素將變得更容易，并且能夠用更簡單清晰的代碼來完成復雜的布局。
注：*更多關于Flexbox的基礎概念建議閱讀使用 CSS 彈性盒子
我在實踐Flexbox時最大的體會就是它能讓子元素平均分配空間以及讓控制子元素的位置變得更加方便了。
接下來我將談談Flexbox的一些常見屬性，能幫助我們更好的理解它們到底有什么作用，以及怎么使用。
display:flex
設置display:flex是使用Flexbox的第一步
我們給當前容器創(chuàng)建四個div，按照Normal Flow的原則，由于每個div的display屬性值默認為block，那么每個div就會占據(jù)一整行寬度。
當我們給當前容器設置display:flex：
#flexbox{
display: flex;
}
就會使得當前容器變成了彈性容器，產(chǎn)生的變化效果如下：
Flexbox里有幾個概念需要弄清楚：
- 彈性容器(Flex container)
包含著彈性項目的父元素。 - 彈性項目(Flex item)
彈性容器的每個子元素都稱為彈性項目。彈性容器直接包含的文本將被包覆成匿名彈性單元。
另外，其實設置彈性盒子還可以使用display:inline-flex，它和display: flex;是一樣的。由此我們也可以知道，flexbox其實是一種內(nèi)聯(lián)的形式。
flex-direction
在學習flex-direction屬性以前我們要了解兩根軸線：主軸(main axis)和與之垂直的側(cè)軸(cross axis)。每一個彈性布局里都包含這兩根軸。如下：
flex-deriction有四個屬性值可以用：
| 屬性 | 描述 |
|---|---|
| row | flex容器的主軸被定義為與文本方向相同。 主軸起點和主軸終點與內(nèi)容方向相同。 |
| row-reverse | 表現(xiàn)和row相同，但是置換了主軸起點和主軸終點 |
| column | flex容器的主軸和塊軸相同。主軸起點與主軸終點和書寫模式的前后點相同 |
| column-reverse | 表現(xiàn)和column相同，但是置換了主軸起點和主軸終點 |
舉例應用：
默認情況，flex項沿著主軸從左到右排列，但是我們可以設置通過flex-direction的屬性值更改主軸方向：
#flexbox {
display: flex;
flex-direction: column;
}
效果如下圖所示：
這里有一點需要注意的是，flex-direction并不是把flex項按照垂直方向排列，而是更改了彈性容器的主軸方向，使它的flex項按照主軸方向排列。
我們沒學flex以前如果要寫出這種效果一般會選擇float，但是很明顯float還會帶來一些“副作用”，而用flex直接了當。是不是感覺很棒？
另外三個屬性的效果如下：
justify-content
justify-content定義了在當前行上，彈性項目沿主軸對齊方式
它有五個屬性值可以使用：
| 屬性 | 描述 |
|---|---|
| flex-start | 每行第一個彈性元素與行首對齊，后面的元素跟著前面的元素對齊。 |
| flex-end | 每行最后一個彈性元素與行尾對齊，前面的元素跟著后面的元素對齊。 |
| center | 每行元素居中對齊。 |
| space-between | 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。 |
| space-around | 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最后一個元素到行尾的距離將會是相鄰元素之間距離的一半。 |
每個屬性值的效果如圖：
這里需要注意的細節(jié)有：
- 當屬性值為
space-around時：
兩端的flex項與父容器會產(chǎn)生相等間隔，因為它是在四個子元素間均分多余空間總和。 - 當屬性值為
space-between時：
兩端的flex項和父容器之間不會產(chǎn)生間隔，因為它是在中間（第一個flex項右邊到最后一個flex項左邊）均分多余空間。 - 不管是
space-around還是space-between，每個flex項產(chǎn)生的間隔不會重疊，因此中間的間隔會變成兩倍
align-items
align-items屬性定義了flex項在側(cè)軸上的對齊方式。
它也有五個屬性值可以使用：
| 屬性 | 描述 |
|---|---|
| flex-start | 元素向側(cè)軸起點對齊。 |
| flex-end | 元素向側(cè)軸終點對齊。 |
| center | 元素在側(cè)軸居中。如果元素在側(cè)軸上的高度高于其容器，那么在兩個方向上溢出距離相同。 |
| stretch | 彈性元素被在側(cè)軸方向被拉伸到與容器相同的高度或?qū)挾取?/td> |
| baseline | 元素按照他們段落標簽的文本基線對齊 |
每個屬性值的效果如圖：
這個里需要注意的細節(jié)是：
- 當
align-items: stretch時，必須將每個flex項設置為auto，否則height屬性會覆蓋stretch - 當
align-items: baseline時： 如果去掉段落標簽或者沒內(nèi)容，flex項就會按照每個它的底部對齊，如下圖所示：
對Baseline不了解的可以看這篇文章：
深入理解 CSS：字體度量、line-height 和 vertical-align
或者看下面這張圖：
flexbox-align-items-baseline.jpg
align-self
-align-self是設置flex項自身對齊，它會對齊當前 flex 行中的 flex項，并覆蓋align-items的值. 如果任何 flex 項的側(cè)軸方向 margin值設置為 auto，則會忽略 align-self。
由于它繼承了flex容器的align-items，所以它的可用屬性值和align-items一樣。
下面我們看的這個例子能讓我們更直觀的感受align-self的作用。
我們設置前兩個flex項的 align-self屬性，其余的應用 align-items: center和flex-direction: row，效果如下：
前面介紹的四個屬性都是軸自身變化有關的屬性，而接下來要介紹的屬性是在軸上變化的屬性
order
order屬性設置了flex項在布局中的排列順序，按增序排列，當order值相同的時候，按照它們在源代碼中出現(xiàn)的順序進行布局。
語法：
.item {
order: <integer>; /*<integer>表示此可伸縮項目所在的次序組*/
}
效果示例：
flex-flow
flex-flow屬性是flex-direction和flex-wrap的簡寫。它的屬性值也是綜合這兩個屬性的屬性值。沒什么需要講的
flex-wrap
flex-wrap是決定flex項是否換行的屬性。
它最主要的三個屬性值是：
| 屬性 | 描述 |
|---|---|
| nowrap | flex 項不換行，這可能導致溢出 flex 容器 |
| wrap | flex 項換行。 |
| wrap-reverse | 換行并且反方向排列 |
實現(xiàn)效果：
結(jié)束語
現(xiàn)在Flexbox基本上已經(jīng)被全面支持了，它主要適用于應用程序的組件及小規(guī)模的布局，它的屬性很容易理解，也很容易掌握。真是解除了我們在實現(xiàn)復雜布局時的后顧之憂。
如果看完這篇文章，你對自己flexbox的感覺還不夠強烈，可以通過這個游戲快速上手：Flexbox Froggy
