flex佈局

 

 

 

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。