3、元素如何彈性伸縮應對
當flex-wrap: nowrap;不折行時，容器寬度有剩餘/不夠分，彈性元素們該怎麼「彈性」地伸縮應對？
這裏針對上面兩種場景，引入兩個屬性(需應用在彈性元素上)
flex-shrink：縮小比例（容器寬度<元素總寬度時如何收縮）flex-grow：放大比例（容器寬度>元素總寬度時如何伸展）
1. flex-shrink: 縮小比例
來看下如下場景，彈性容器#container寬度是200px，一共有三個彈性元素，寬度分別是50px、100px、120px。在不折行的狀況下，此時容器寬度是明顯不夠分配的。
實際上，flex-shrink默認爲1，也就是當不夠分配時，元素都將等比例縮小，佔滿整個寬度，以下圖。
#container {
display: flex; flex-wrap: nowrap; }
元素收縮的計算方法
真的是等比縮小(每一個元素各減去70/3的寬度)嗎？這裏稍微深究一下它的收縮計算方法。
- 彈性元素1：50px→37.03px
- 彈性元素2：100px→74.08px
- 彈性元素3：120px→88.89px
先拋結論：flex-shrink: 1並不是嚴格等比縮小，它還會考慮彈性元素自己的大小。
- 容器剩餘寬度：
-70px - 縮小因子的分母：
1*50 + 1*100 + 1*120 = 270(1爲各元素flex-shrink的值) - 元素1的縮小因子：
1*50/270 - 元素1的縮小寬度爲縮小因子乘於容器剩餘寬度：
1*50/270 * (-70) - 元素1最後則縮小爲：
50px + (1*50/270 *(-70)) = 37.03px
加入彈性元素自己大小做爲計算方法的考慮因素，主要是爲了不將一些自己寬度較小的元素在收縮以後寬度變爲0的狀況出現。
2. flex-grow: 放大比例
一樣，彈性容器#container寬度是200px，但此時只有兩個彈性元素，寬度分別是50px、100px。此時容器寬度是有剩餘的。
那麼剩餘的寬度該怎樣分配？而flex-grow則決定了要不要分配以及各個分配多少。
（1）在flex佈局中，容器剩餘寬度默認是不進行分配的，也就是全部彈性元素的flex-grow都爲0。
（2）經過指定flex-grow爲大於零的值，實現容器剩餘寬度的分配比例設置。
元素放大的計算方法
放大的計算方法並無與縮小同樣，將元素大小歸入考慮。
僅僅按flex-grow聲明的份數算出每一個需分配多少，疊加到原來的尺寸上。
- 容器剩餘寬度：
50px - 分紅每份：
50px / (3+2) = 10px - 元素1放大爲：
50px + 3 * 10 = 80px
無多餘寬度時，flex-grow無效
下圖中，彈性容器的寬度正好等於元素寬度總和，無多餘寬度，此時不管flex-grow是什麼值都不會生效。
同理，對於flex-shrink，在容器寬度有剩餘時也是不會生效的。所以這兩個屬性是針對兩種不一樣場景的互斥屬性。
4、彈性處理與剛性尺寸
在進行彈性處理之餘，其實有些場景咱們更但願元素尺寸固定，不須要進行彈性調整。設置元素尺寸除了width和height之外，flex還提供了一個flex-basis屬性。
flex-basis設置的是元素在主軸上的初始尺寸，所謂的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。
1. 與width/height的區別
首先以width爲例進行比較。看下下面的例子。#container {display:flex;}。
<div id="container"> <div>11111</div> <div>22222</div> </div>
(1) 二者都爲0
- width: 0 —— 徹底沒顯示
- flex-basis: 0 —— 根據內容撐開寬度
(2) 二者非0
- width: 非0;
- flex-basis: 非0
—— 數值相同時二者等效
—— 同時設置，flex-basis優先級高
(3) flex-basis爲auto
flex-basis爲auto時，如設置了width則元素尺寸由width決定；沒有設置則由內容決定
(4) flex-basis == 主軸上的尺寸 != width
- 將主軸方向改成：上→下
- 此時主軸上的尺寸是元素的height
- flex-basis == height
2. 經常使用的複合屬性 flex
這個屬性應該是最容易迷糊的一個，下面揭開它的真面目。
flex = flex-grow + flex-shrink + flex-basis
複合屬性，前面說的三個屬性的簡寫。
一些簡寫
flex: 1=flex: 1 1 0%flex: 2=flex: 2 1 0%flex: auto=flex: 1 1 auto;flex: none=flex: 0 0 auto;// 經常使用於固定尺寸 不伸縮
flex:1 和 flex:auto 的區別
其實能夠歸結於flex-basis:0和flex-basis:auto的區別。
flex-basis是指定初始尺寸，當設置爲0時（絕對彈性元素），此時至關於告訴flex-grow和flex-shrink在伸縮的時候不須要考慮個人尺寸；相反當設置爲auto時（相對彈性元素），此時則須要在伸縮時將元素尺寸歸入考慮。
所以從下圖（轉自W3C）能夠看到絕對彈性元素若是flex-grow值是同樣的話，那麼他們的尺寸必定是同樣的。
5、容器內如何對齊
前面講完了元素大小關係以後，下面是另一個重要議題——如何對齊。能夠發現上面的全部屬性都是圍繞主軸進行設置的，但在對齊方面則不得不加入做用於交叉軸上。須要注意的是這些對齊屬性都是做用於容器上。
1. 主軸上的對齊方式
justify-content
2. 交叉軸上的對齊方式
主軸上比較好理解，重點是交叉軸上。由於交叉軸上存在單行和多行兩種狀況。
交叉軸上的單行對齊
align-items
默認值是stretch，當元素沒有設置具體尺寸時會將容器在交叉軸方向撐滿。
當align-items不爲stretch時，此時除了對齊方式會改變以外，元素在交叉軸方向上的尺寸將由內容或自身尺寸（寬高）決定。
注意，交叉軸不必定是從上往下，這點再次強調也不爲過。
交叉軸上的多行對齊
還記得能夠經過flex-wrap: wrap使得元素在一行放不下時進行換行。在這種場景下就會在交叉軸上出現多行，多行狀況下，flex佈局提供了align-content屬性設置對齊。
align-content與align-items比較相似，同時也比較容易迷糊。下面會將二者對比着來看它們的異同。
首先明確一點：align-content只對多行元素有效，會以多行做爲總體進行對齊，容器必須開啓換行。
align-content: stretch | flex-start | flex-end | center | space-between | space-around align-items: stretch | flex-start | flex-end | center | baseline
在屬性值上，align-content比align-items多了兩個值：space-between和space-around。
align-content與align-items異同對比
與align-items同樣，align-content:默認值也是stretch。二者同時都爲stretch時，毫無懸念全部元素都是撐滿交叉軸。
#container {
align-items: stretch;
align-content: stretch;
}
當咱們將align-items改成flex-start或者給彈性元素設置一個具體高度，此時效果是行與行之間造成了間距。
#container {
align-items: flex-start;
align-content: stretch;
}
/*或者*/ #container { align-content: stretch; } #container > div { height: 30px; }
爲何？由於align-content會以整行爲單位，此時會將整行進行拉伸佔滿交叉軸；而align-items設置了高度或者頂對齊，在不能用高度進行拉伸的狀況下，選擇了用間距。
嘗試把align-content設置爲頂對齊，此時以行爲單位，總體高度經過內容撐開。
而align-items僅僅管一行，所以在只有第一個元素設置了高度的狀況下，第一行的其餘元素遵循align-items: stretch也被拉伸到了50px。而第二行則保持高度不變。
#container {
align-items: stretch;
align-content: flex-start;
}
#container > div:first-child {
height: 50px; }
二者的區別仍是不明顯？來看下面這個例子。
這裏僅對第二個元素的高度進行設置，其餘元素高度則仍保持內容撐開。
以第一個圖爲例，會發現align-content會將全部行進行頂對齊，而後第一行因爲第二個元素設置了較高的高度，所以體現出了底對齊。
二者差別總結：
- 二者「做用域」不一樣
- align-content管全局(全部行視爲總體)
- align-items管單行
可否更靈活地設置交叉軸對齊
除了在容器上設置交叉軸對齊，還能夠經過align-self單獨對某個元素設置交叉軸對齊方式。
- 值與
align-items相同 - 可覆蓋容器的
align-items屬性 - 默認值爲
auto，表示繼承父元素的align-items屬性
#container {
display: flex; align-items: flex-start; } #container > div:first-child { align-self: stretch; } #container > div:nth-child(3) { align-self: center; } #container > div:nth-child(4) { align-self: flex-end; }
6、其餘
order：更優雅地調整元素順序
#container > div:first-child {
order: 2; } #container > div:nth-child(2) { order: 4; } #container > div:nth-child(3) { order: 1; } #container > div:nth-child(4) { order: 3; }
order：可設置元素之間的排列順序
- 數值越小，越靠前，默認爲0
- 值相同時，以dom中元素排列爲準
7、總結