基本介紹
特點
1.flexbox是一種css display類型，提供一種更簡單高效的布局方式；
2.flexbox可以對元素相對于父元素、兄弟元素進行定位、控制尺寸、控制間距；
3.flexbox對響應式有很好的支援；
工作原理
設定父元素的
display
屬性為
flex
，則子元素都變成
flex item
，由此可以控制子元素的排列方式、尺寸、間距等；
相容性
（點選檢視大圖）
Flex Container
先來看一個最簡單的flex示例，外層div設定
display: flex
成為一個flex container，内部的3個div則自動變為flex item：
html:
<div class="flex-container">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</div> css:
.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }
.box{ height: 100px; min-width: 100px; }
.one{ background: pink; }
.two{ background: lightgreen; }
.three{ background: skyblue; } 效果：
效果與浮動布局類似，但是如果用浮動實作的話需要寫更多的代碼，而flex一行就搞定了。
1. Justify Content
如果我們想讓flex item居中排列呢，我們可以給flex container增加一個css屬性：
justify-content
，它控制flex item在主軸方向（main axis，由flex-drection決定，預設為水準方向）上的對齊方式：
.flex-container{
...
justify-content: center;
} 效果如圖：
除此之外
justify-content
還可以設定為
flex-start
,
flex-end
,
space-around
,
space-between
,
space-even
等值，具體效果請自行實驗。
2. Align Items
實作了flex方向的居中後，垂直于主軸方向（cross axis）的居中可以用
align-items
實作。
css：
.flex-container{
max-width: 960px;
margin: 0 auto;
display:flex;
justify-content: center;
height: 200px;
background-color: white;
align-items: center;
} 效果：
使用flex解決了以往css垂直居中實作複雜的問題！相應的，
align-items
還有
flex-start
,
flex-end
等其他值。
3. Flex Direction
flex-direction
決定了主軸方向即flex item排列方向，除了預設的
row
方向之外，還可以縱向、反向（row-reverse/column-reverse）排列flex item：
css：
.flex-container{
...
flex-direction: column;
align-items: center;
} 效果：
4. Flex Wrap
如果我們不想在視窗變窄的情況下壓縮flex item，而是讓超出邊界的flex item換行顯示那我們可以設定flex c
ontainer的flex-wrap：
.flex-container{
max-width: 960px;
margin: 0 auto;
display:flex;
flex-wrap: wrap;
}
.box{
height: 100px;
min-width: 300px;
flex-grow: 1;
} 當我們壓縮視窗的時候，效果如下：
flex wrap還有一個值：
wrap-reverse
，設定該值後，被wrap的元素會排到其他元素上面：
由此可見，flex wrap一定程度上可以取代media query了。
5. Flex Row
最後，
flex-direction
和
flex-wrap
可以合并為一個屬性
flex-flow
，比如：
flex-flow: row-reverse wrap
。
Flex Item
1. Flex Grow
在上面所有的例子中，三個flex item隻占據了flex container小部分空間，如果想讓flex item占滿flex container我們需要給flex item設定
flex-grow
屬性。顧名思義，grow意味着增長，用于控制flex item的尺寸的伸展。
将css修改為:
.box {
height: 100px;
min-width: 100px;
flex-grow:1;
} 效果：
可以看到三個子元素平分了父元素的空間，因為此時它們的
flex-grow
都是1。如果隻有一個子元素設定了
flex-grow
呢？
css：
.box{ height: 100px; min-width: 100px; }
.one{ background: pink; flex-grow: 1; } 效果：
此時two和three的大小不變，而one占據了父元素剩餘空間。
如果将one的
flex-grow
改為2，而two和three改為1，我們看看會發生什麼：
css:
.box{ height: 100px; min-width: 100px; flex-grow:1; }
.one{ background: pink; flex-grow: 2; } 效果：
可以看到one的寬度變成了two和three的兩倍，是以flex item的尺寸和
flex-grow
的值成正比。
2. Flex Shrink
與
flex-grow
相對的是
flex-shrink
，
flex-shrink
用于控制子元素尺寸超過flex container後，對子元素的壓縮。請看示例：
修改box的寬度為flex container的1/3，one、two、three的
flex-shrink
分别為1，2，3：
.box{ height: 100px; width: 320px; }
.one{ background: pink; flex-shrink: 1; }
.two{ background: lightgreen; flex-shrink: 2; }
.three{ background: skyblue; flex-shrink: 3; } 當視窗正常尺寸時，效果如下：
當我們壓縮視窗使其變得更窄後，效果如下：
當flex container寬度變為540px後，子元素都被不同程度的壓縮了。壓縮後的one、two、three的寬度分别為250px、180px、110px，是以相比于初始寬度320px被壓縮掉的寬度分别為70px、140px、210px，
70 : 140 : 210 = 1 : 2 : 3
，與flex shrink的值成反比。實際上壓縮率和flex item的初始尺寸也有關系，隻不過當初始尺寸一樣時它帶來的影響被忽略了。
假設flex shrink為
fs
，flex item的初始尺寸為
is
，flex item被壓縮的尺寸為
ss
，則正确的表達式為：
fs ∝ is/ss
3. Flex Basis
flex-basis用于設定flex item的初始寬/高。為什麼有width和height還需要重新加一個flex-basis呢？flex-basis和width/height有如下的差別：
1.flex-basis隻能用于flex-item，而width/height可以應用于其他類型的元素；
2.flex-basis和flex-direction有關，當flex-direction為row的時，flex-basis設定的是寬度，當flex-direction為column時，flex-basis設定的是高度；
3.當flex item被絕對定位後（absolute position），flex-basis不起作用，而width/height可以；
4.flex-basis可以用于flex的簡寫形式，如：
flex: 1 0 200px
;
我們來看一下flex-basis的作用，将css修改如下：
.box{
height: 100px;
flex-grow: 1;
}
.one{
background: pink;
flex-basis: 100px;
}
.two{
background: lightgreen;
flex-basis: 200px;
}
.three{
background: skyblue;
flex-basis: 300px;
} 3個flex item都在原來的初始寬度基礎上增加了相同的寬度：
當然，這個例子如果換成使用
width
也是一樣的效果，但是雖然效果一樣但意義不一樣，是以使用flex布局時還是應該盡量遵守規範，選合适的人去幹正确的事。
4. Order
通過
order
屬性我們可以改變flex item的排列順序，例如：
html:
<section id="blocks">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</section>css：
#blocks{
display: flex;
margin: 10px;
justify-content: space-between;
}
#blocks div{
flex: 0 0 100px;
padding: 40px 0;
text-align: center;
background: #ccc;
} 預設排列順序是按照flex item在html中的出現順序：
當我們修改flex item的
order
值後，flex item會按照order值升序排列：
css：
.one{ order: 4; }
.two{ order: 3; }
.three{ order: 2; }
.four{ order: 1; } 效果：
結語
flex就先簡單介紹到這裡，flex很強大也很簡單，希望大家用的開心。