初探flex佈局

給元素設置display: flex 能夠將元素設置爲 flex 佈局, 並能夠經過一系列屬性的設置來控制其中子元素的佈局。

1.flex 佈局的相關屬性

flex佈局的相關屬性能夠分紅兩類：

1. 對父元素設置的屬性，控制父元素內全部子元素的佈局
2. 對子元素設置的屬性，單獨控制某個子元素的位置

詳細屬性以下:

對父元素	對子元素
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-content	flex
align-items	align-self

下面分別對以上flex屬性作討論。如下部分示例圖片的DOM結構以下:

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <!-- <div class="child">4</div> -->
    <!-- <div class="child">5</div> -->
</div>
複製代碼

其中.parent爲設置display:flex的父元素爲綠色,.child爲被佈局的子元素.

flex佈局中涉及flex父元素的主軸和交叉軸的概念，他們是能夠改變的，可是本文只取默認狀況，即主軸爲水平軸，交叉軸是豎直軸，在這篇文章中固定不變。因此文中提到的「左右」是主軸方向，而「上下」就是交叉軸方向。如圖:

2. 對 父元素 設置的屬性們

對父元素設置的屬性能夠控制子元素總體的佈局方法。

2.1 flex-direction

flex-direction屬性設置父元素中子元素的排列方向，取值爲:

flex-direction: row || row-reverse || column || column-reverse
複製代碼

其中||符號表示或。

當取值爲:

• row ：以行的形式排列，通常爲從左到右(==>)排列，示意圖以下

  

• row-reverse ：以行的形式排列，只是方向和row反過來, 通常爲從右向左(<==)排列，示意圖以下

• column：以列的形式排列，通常爲從上到下排列，示意圖以下

  

• column-reverse ：以列的形式排列，只是方向和column反過來, 通常爲從下向上排列，示意圖以下

  

2.2 flex-wrap

這個屬性中包含wrap, 顧名思義, 這是個控制子元素換行的屬性, 取值爲：

flex-wrap: nowrap || wrap || wrap-reverse;
複製代碼

• nowrap: 不換行，並且會把子元素的寬壓縮以確保不溢出父元素

  

• wrap: 會換行

  

• wrap-reverse: 換行，同時方向反過來

  

2.3 flex-flow

這是個複合屬性, 是前面提到的兩個屬性的複合，即:

flex-flow: flex-direction flex-wrap
複製代碼

例如:

• flex-flow: row-reverse nowrap
  至關於:

  flex-direction: row-reverse;
  flex-wrap: nowrap;
  複製代碼

• flex-flow: row-reverse wrap
  至關於:

  flex-direction: row-reverse;
  flex-wrap: wrap;
  複製代碼

2.4 justify-content

這個屬性控制子元素在水平方向的對齊方式, 取值以下:

justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly;
複製代碼

當取值分別以下時:

• flex-start: 左對齊，從左至右排列

  

• flex-end : 右對齊，向左排列

  

• center: 居中對齊

  

• space-between: 每一個子元素分散開, 只在中間的子元素之間留空白，兩側的子元素靠邊貼着

  

• space-around: 子元素分散，每一個子元素兩側都有相等大小的空間，可是子元素之間的空間不合並，因此子元素之間的空間是子元素和父元素之間空間的2倍，如圖所示:

  

• space-evenly: 子元素之間以及子元素和父元素之間的空隙相等, 如圖所示:

  

2.5 align-content

這個屬性和 2.4部分的 justify-content 有些類似，不過此屬性是控制垂直方向的, 取值有:

align-content: stretch || flex-start || flex-end || center || space-between || space-around || space-evenly;
複製代碼

當取值分別以下時:

• flex-start: 默認值,從上到下排列:

  

• flex-end: 從下到上

  

• center: 子元素彙集到中軸線

  

• space-between:

  

• space-around:

  

• space-evenly:

  

-stretch: 顧名思義，有拉伸的意思，當元素的高度自適應時，會拉伸每一個子元素的高度來把父元素填滿，如圖:

注意：若是給子元素指定了高度，則和默認效果 flex-start相同。

2.6 align-items

此屬性控制全部子元素在水平方向上的對齊方式，取值可爲:

align-items: stretch | flex-start | flex-end | center | baseline;
複製代碼

爲更利於此屬性的表現，分別調節子元素的高度和字體大小。 當取值分別以下時:

• flex-start: 默認值,頂部對齊:

  

• flex-end: 底部對齊

  

• center: 垂直中軸線對齊

  

• baseline: 子元素以文字基線對齊

  

  

-stretch: 和上面同樣，當元素的高度自適應時，會拉伸每一個子元素的高度來把父元素填滿，如圖:

3. 對子元素設置的屬性

3.1 order

這個屬性能夠控制一個子元素相對於其餘子元素的先後位置，屬性值是整數，默認值是0，能夠取負整數。

屬性值越小，則相對於其餘子元素的位置越靠前，例如對三個子元素分別設置order屬性爲-3,-2,-1,即

.child:first-child {
    order: -1;
}

.child:nth-child(2) {
    order: -2;
}

.child:nth-child(3) {
    order: -3;
}
複製代碼

因爲-3<-2<-1,故第3個子元素在最前，第一個子元素在最後，如圖:

在父元素設置爲 flex-direction: column; 時:

3.2 flex-grow

這個屬性表示元素在寬度上對於剩餘空間的使用比例，取值爲大於等於0的數，默認是0, 即不擴張。這聽起來有些抽象，以一個圖爲例:

上圖中父元素寬度爲350px,有三個子元素在一行上， 每一個子元素寬度都是100px,三個子元素共300px寬度,則父元素在這一行還剩餘 350-300=50px的主軸寬度空間沒有被填滿,而這50px的剩餘寬度能夠分配給這一行的子元素增長到子元素的寬度裏。 flex-grow屬性值決定了一個子元素能拿到的這部分剩餘寬度裏的多少。

假設三個子元素的flex-grow屬性分別設置爲一、二、3, 則第一個元素佔了總比例的1/(1+2+3)=1/6, 同理第二個元素佔了2/6, 第三個元素佔了3/6, 因此這3個子元素分別能佔有50*(1/6)px、50*(2/6)px、50*(3/6)=25px,即寬度分別增長了以上的寬度,第3個子元素佔有(增長)的寬度最多，第1個子元素增長的寬度最少,即如圖:

若是全部子元素的flex取值相加的和小於1，則每一個元素的值就是佔剩餘寬度的比例，例如三個子元素的flex-grow分別設置爲0.一、0.二、0.3，則三個元素佔有的剩餘寬度分別是0.1*50=5px、0.2*50=10、0.3*50=15px, 效果圖以下:

3.3 flex-shrink

這個屬性設置當父元素寬度不足時子元素的寬度收縮比例, 和上面的flex-grow正好相反, 可是收縮的方法和後者相同。默認值是1, 即收縮相同的寬度。爲便於展現, 將子元素寬度都設置成150px, 如圖:

flex-shrink就是設置每一個子元素相對於150px的收縮比例，決定每一個子元素收縮多少寬度的方法和 flex-grow相同，舉兩個例子,當三個子元素都設置成1時, 則每一個子元素都收縮 1/3*150=50px,如圖:

三個子元素分別設置0.一、0.二、0.3,則三個子元素的寬度分別收縮15px、30px、45px，第三個子元素寬度收縮最大，效果以下:

3.4 flex-basis

這個屬性設置子元素的寬度，會代替width屬性，也就是說若是同時設置了width和flex-basis，則width會被忽略，以flex-basis爲準。默認值是auto。

當全部子元素的寬度相加超過父元素的寬度時，全部子元素會等比例收縮，效果至關於設置全部子元素的flex-shrink: 1;。

3.5 flex

這是個複合屬性:flex: flex-grow flex-shrink flex-basis;,後兩個參數是可選的。

3.6 align-self

這個屬性控制子元素自己的對齊方式，align-self: auto | flex-start | flex-end | center | baseline | stretch; ，默認值是auto, 表示繼承父元素的align-items的屬性值。

當設置父元素的align-items: center;時, 對第二個子元素設置align-item屬性, 取不一樣值時的效果以下:

• auto: 繼承自父元素的 align-items

  

• flex-start: 對齊頂部

  

• flex-end: 對齊底部

  

• center: 中軸線對齊

  

• baseline: 基線對齊

  

• stretch: 拉伸高度以填滿父元素的高度

  

對於子元素, 設置 float, clear, vertical-align等屬性不生效。

若有錯誤，感謝指出!
參考資料:
寫給本身看的display: flex佈局教程--張鑫旭
MDN