什麼是彈性盒子
彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要适應不同的螢幕大小以及裝置類型時確定元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和配置設定空白空間。
- 主軸（main axis）是沿着 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為 main start 和 main end。
- 交叉軸（cross axis）是垂直于 flex 元素放置方向的軸。該軸的開始和結束被稱為 cross start 和 cross end。
- 設定了 display: flex 的父元素（在本例中是 ）被稱之為 flex 容器（flex container）。
- 在 flex 容器中表現為柔性的盒子的元素被稱之為 flex 項（flex item）（本例中是 元素。
列與行排列
彈性盒子提供了 flex-direction 這樣一個屬性，它可以指定主軸的方向（彈性盒子子類放置的地方）— 它預設值是 row，這使得它們在按你浏覽器的預設語言方向排成一排
一 、容器相關屬性
1、flex-direction、flex-wrap和flex-flow
flex-flow(彈性流動配置)屬性的值由flex-direction(彈性方向)和flex-wrap(彈性空間換行)屬性組成，這一組值都是用于改變主軸設定的，而主軸的方向決定彈性布局的屬性值對盒模型子元素在空間内的配置設定方式。flex-direction屬性值預設為row(主軸方向為行的方向，水準方向)，其子元素的排列方向為延主軸從左至右排列，除此之外還可以取row-reverse、column(主軸方向為列的方向，垂直方向)和column-reverse，分别表示從右往左，從上至下和從下到上。flex-wrap決定盒子的主軸的數量，預設情況下，容器内容會按照一排布置在容器内(主軸隻有一條)，當寬度不足時，所有的元素都将進行等比例壓縮，container的flex-wrap預設值就是對應的nowrap不換行，換行為wrap(按照子元素寬度的占比出現多條主軸)，換行并反向排列為wrap-reverse。一個彈性盒子的預設排列方式如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{ width: 302px; height: 302px; border:1px solid; display: flex;}
.item{width: 100px; height: 100px}
.item1-1{ background:red;}
.item1-2{ background:orange;}
.item1-3{ background:yellow;}
.item1-4{ background:green;}
.item1-5{ background:cyan;}
.item1-6{ background:blue;}
</style>
</head>
<body>
<div class="container ">
<div class="item item1-1">1</div>
<div class="item item1-2">2</div>
<div class="item item1-3">3</div>
<div class="item item1-4">4</div>
<div class="item item1-5">5</div>
<div class="item item1-6">6</div>
</div>
</body>
</html>
結果如下：
可以看到，本來寬度為100px的子級方塊寬度被壓縮，子級元素沒有換行，那麼如果進行按列排列并且換行後反向排列的結果如何？
.container{ flex-flow: column wrap-reverse; }
上述代碼加上樣式
結果如下:
子元素位置在頁面上的分布，經過彈性盒模型屬性值設定之後，表現的位置并不與HTML順序一緻，但實際上元素的位置并沒有發生改變。
2、容器主軸分布方式：justify-content屬性
前面提到的主軸和交叉軸的概念主要用于後面幾個屬性，如justifu-content，當主軸方向為水準或者垂直、正向或者反向會是效果呈現很大的變化。該屬性的值有有flex-start(排列到主軸方向頭部)、flex-end(排列到主軸方向尾部)、center(主軸中間)以及space-between(主軸方向等距離配置設定，且兩端與邊緣無間距)和space-around(主軸方向等距離配置設定，且兩端與邊緣也是等間距)。下面分别為space-between和space-around的展示效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.between,.around{ width: 302px; height: 102px;border:1px solid; display: flex; float: left; margin-left: 50px;}
.between{ justify-content: space-between;}
.around{ justify-content: space-around;}
.item1-1{ background:red;}
.item1-2{ background:orange;}
.item1-3{ background:yellow;}
.item1-4{ background:green;}
.item1-5{ background:cyan;}
.item1-6{ background:blue;}
.item2{ width: 80px; height: 80px;}
</style>
</head>
<body>
<div class="container between">
<div class="item item1-1 item2">1</div>
<div class="item item1-2 item2">2</div>
<div class="item item1-3 item2">3</div>
</div>
<div class="container around">
<div class="item item1-4 item2">1</div>
<div class="item item1-5 item2">2</div>
<div class="item item1-6 item2">3</div>
</div>
</body>
</html>
采用space-between和space-around的結果如下左右展示：
當主軸方向是垂直時{flex-direction: column;}，上面的等間距配置設定也是在垂直方向上配置設定。
3、容器内交叉軸分布方式align-items和align-content
align-items是針對彈性盒子内隻有一條主軸是，子元素在交叉軸上的分布，align-content是在盒模型有多條主軸時，元素在交叉軸上的分布，其分布方式對于每一個子元素适用。align-items的屬性值可以為flex-start、flex-end、center以及stretch（衍生，子元素的高度将全部填充為目前主軸的最高高度）和baseline(交叉軸為垂直方向時，元素會根據第一行文本的基礎線進行對齊)，align-content的屬性值為flex-start、flex-end、center、stretch以及space-between和space-around。
使用align-items并且屬性值為baseline和使用align-content并且屬性值為space-around結果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.align_items,.align_content{ width: 302px; height: 302px;border:1px solid; display: flex; float: left; margin-left: 50px;}
.align_items{ align-items: baseline; }
.align_content{ flex-wrap: wrap; align-content: space-around; justify-content: space-around;}
.item1-1{ background:red;}
.item1-2{ background:orange;}
.item1-3{ background:yellow;}
.item1-4{ background:green;}
.item1-5{ background:cyan;}
.item1-6{ background:blue;}
.item3-1,.item3-2,.item3-3{ width: 100px; height: 80px;}
.item3-3{ font-size: 50px; }
.item3-1{ font-size: 24px;}
.item4-1{ width: 200px; height: 80px;}
.item4-2{ width: 30px; height: 50px;}
.item4-3{ width: 280px; height: 100px;}
.item4-4{ width: 80px; height: 30px;}
.item4-5{ width: 40px; height: 100px;}
.item4-5{ width: 120px; height: 60px;}
</style>
</head>
<body>
<div class="container align_items">
<div class="item1-1 item3-1">1</div>
<div class="item1-2 item3-2">2</div>
<div class="item1-3 item3-3">3</div>
</div>
<div class="container align_content">
<div class="item1-1 item4-1">1</div>
<div class="item1-2 item4-2">2</div>
<div class="item1-3 item4-3">3</div>
<div class="item1-4 item4-4">4</div>
<div class="item1-5 item4-5">5</div>
<div class="item1-6 item4-6">6</div>
</div>
</body>
</html>
結果如下：（便于觀察，為align-content屬性的盒子設定了延主軸方向保持子元素周圍間距相等，是以該盒子子元素四周間距應當相等，除設定高度影響外）
二、子元素的彈性盒模型屬性
彈性盒模型容器的屬性，決定了容器子元素在盒模型内的分布，一個屬性值改變的是所有元素的分布方式，而容器子元素也有彈性盒模型屬性可以設定，主要更改子元素本身的樣式，也會間接影響周圍元素。子元素彈性盒模型屬性比較簡單。
1、子元素的順序排列order屬性
子元素的順序可以采用order屬性進行設定，預設值為0，數值越小，元素的順序就越靠近主軸起點，當值相同是按照DOM順序排列。order引起位置的變化并不會改變DOM的位置。
2、子元素的flex屬性
這也是一個複合的屬性(類似flex-flow由flex-direction和flex-wrap組成)，對于子元素設定flex屬性包括flex-grow，flex-shrink和flex-basis，分别代表子元素在彈性盒子内的放大比例，縮小比例和基本尺寸。flex-grow放大比例決定了元素在彈性盒子記憶體在剩餘空間的配置設定情況，預設值為0，意思為就算還有剩餘空間也不進行放大。flex-shrink縮小比例據定了彈性盒子溢出時的壓縮情況，預設值為1，即各元素等比例進行縮小，當值為0時，空間不足，該元素也不會進行縮小。flex-basis給與了元素的基本尺寸，元素被壓縮時不會比basis的值還要小，這樣可以滿足盒子在螢幕縮放的情況系自動換行并填充。例如盒模型内擁有3個子元素，設定彈性盒模型後還有剩餘空間，分别設定flex-grow值為1,2,2，那麼他們将會把剩餘空間的1/5,2/5,2/5填充到自身元素的寬度内，本來設定元素寬度均為100px，那麼經過擴充後寬度就不止100px了。
3、子元素的align-self屬性
調節彈性盒子的元素交叉軸對齊方式除了在容器采用align-items和align-conten屬性，還可以對子元素設定align-self屬性調整其交叉軸的位置，其屬性值可以為auto（預設值，表示繼承父元素的align-items屬性，沒有父元素時等同于stretch）、flex-start、flex-end、center以及stretch和baseline。