1 什么是flex¶
FlexiableBox即是彈性盒子，用來進行彈性布局，可以配合rem處理尺寸的適配問題。為什么我們要使用flex呢？有兩點原因：
-
目前我們所使用的布局大多都是使用div盒裝模型進行布局，而任何一個div都可以指定為flex布局，故而flex可以為盒裝模型提供最大的靈活性。
-
flex布局更加符合響應式設計的特點。
2 主軸方向與換行¶
在使用flex前，有必要認識flex容器的主軸（main axis)和交叉軸(cross axis)。主軸與交叉軸是以子元素的排列方向最為區分依據的：當容器子元素水平排列時，X軸稱為主軸，Y軸稱為交叉軸；當容器子元素垂直排列時，Y軸稱為主軸，X軸稱為交叉軸。主軸起點稱為main start，終點稱為main end；交叉軸起點稱為cross start，交叉軸終點稱為cross end。子元素占主軸的長度稱為main size，占交叉軸長度稱為cross size。
2.1 flex-direction¶
子元素在父元素盒子中的排列方向，包含一下參數：
注意，在使用flex-direction設置排列方向后，在默認情況下，如果子元素總長大於容器總長，子元素總長將被平均壓縮，例如：父元素設置為300px，4個子元素長度各位100px，設置flex-direction值為row后，4個子元素總長將被壓縮為300px，每個元素皆為75px。如果要控制不對子元素進行壓縮，需要通過下方flex-wrap進行設置進行換行顯示。
2.2 flex-wrap¶
子元素在父元素盒子中是否換行（列）。包含一下參數：
設置flex-direction值為row，然后設置flex-wrap值為wrap，此時，如果子元素總長超出容器長度，那么，子元素超出部分將會換行顯示。可以看出，flex-direction和flex-wrap兩設置項經常組合出現，所以，在flex中提供flex-flow用以簡寫這兩項。
2.3 flex-flow¶
flex-direction和flex-wrap的簡寫形式。
書寫形式："flex-flow: flex-direction的值 flex-wrap的值"
例如，flex-flow:row wrap; 與flex-direction:row;flex-wrap:wrap;組合等同。
3 剩余空間使用-主軸對齊方式¶
如果子元素總長不足以占滿主軸空間時，就會有剩余空間。剩余空間如何使用呢？可以通過justify-content來進行設置。
- justify-content
取值項如下：
4 交叉軸對其方式¶
- align-items
設置每個flex元素在交叉軸上的默認對齊方式。
與align-items很相似的有一個屬性align-content，區別在於，align-items將每一行/列當做一個獨立整體進行排列，而align-conten把所有元素當做一個整體在交叉軸上進行排列。
- align-content
5 給子元素設置伸縮比例¶
5.1 flex-basis¶
設置子元素彈性盒伸縮基准值。如下所示，父元素設置了flex布局，寬度為500px，在兩個子元素盒子中，可以通過flex-basis設置基准值各占50%，也就是150px。在這里，X軸即是主軸，基准值與寬度等同。
#div-container{
display: flex;
width: 500px;
}
#div-child1{
flex-basis: 30%;
}
#div-child2{
flex-basis: 30%;
}
5.2 flex-grow¶
設置彈性盒子的擴展比率。在5.1節例子中，兩個子元素div盒子各占30%，那就還有40%的剩余空間，如何處理呢？flex-grow可以這個剩余空間的使用。
flex-grow的值可以設置為整數，表示所占份數。如下所示，第一個子元素div盒子flex-grow都設置為1，第二個設置為4，表示共分成,5份，各占其中1份，第一個div可以擴展剩余空間的五分之一，所以第一個div最終款讀書為30%500+（1-60%）50020%=190px；同理，第二個子元素div為30%500+（1-60%）50080%=310px。
#div-container{
display: flex;
width: 500px;
}
#div-child1{
flex-basis: 30%;
flex-grow: 1;
}
#div-child2{
flex-basis: 30%;
flex-grow: 4;
}
5.3 flex-shrink¶
設置彈性盒子的縮小比率。如果子元素總寬度大於容器寬度，這時候就顯示不下了，那么就需要設置縮小比率。上文說到過，如果子元素總長大於容器總長，子元素總長將被平均壓縮，這是flex布局的默認設置。我們可以設置flex-shrink值為0，那么，子元素將可以超出父容器。
在多數情況下，我們還是不允許超出的，那么，就需要對子元素進行縮放。如下所示，父容器寬度為400px，兩個子元素di寬度都為300px，那就將超出200px的空間，這200px肯定要通過縮放兩個子元素div來節省空間，可以通過flex-shrink來設置。我們設置第一個div的flex-shrink值為1，第二個div的flex-shrink值為3，這即是說，超出的200px中，第一個div要縮放超出的200px的四分之一，也就是50px，所以第一個子元素div最終寬度為300-50=250px；第二個div要縮放四分之三，也即是150px，所以第二個地元素div寬度變為300-150=150px。
#div-container{
display: flex;
width: 400px;
}
#div-child1{
flex-basis: 300;
flex-grow: 1;
flex-shrink: 1;
}
#div-child2{
flex-basis: 300;
flex-grow: 1;
flex-shrink: 3;
}
5.4 flex¶
flex-grow、flex-shrink、flex-basis的縮寫。例如, “flex: 1 2 3;”表示flex-grow值為1，flex-shrink值為2，flex-basis值為3。