摘要：挺早就接觸了的布局，深入使用也就是在近期移動端開發。屬性用于設置或檢索彈性盒模型對象的子元素如何分配空間。所以，項目之間的間隔比項目與邊框的間隔大一倍。默認值是，也就是不進行縮放，占原來元素內容寬度大小。

　　挺早就接觸了css的flex布局，深入使用也就是在近期移動端開發。老來多健忘，只能自己梳理一下知識點，當做溫故知新吧。

，請原諒小白的才疏學淺，寫的不到位的地方請指正。

　　flex屬性用于設置或檢索彈性盒模型對象的子元素如何分配空間。也就是說當某個div使用了flex后，div也就成為了flex容器，

里面的子項即使使用float，vertical-align、clear這些屬性也是無法生效的，到這里其實還是一頭霧水。那么我們先來看一下flex的6個屬性。

　　1、flex-direction，顧名思義，direction就是方向的意思。使用flex后，容器默認會有兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）

ps：我個人理解是X軸和Y軸，這樣方便自己記憶，下面就使用X（水平軸）和Y（交叉軸）來說明。

那么知道容器存在X軸Y軸以后，再回到這個屬性上來理解就容易多了，首先可以是X軸的排列方向，也就是通俗的左對齊和右對齊，然后是Y軸的縱對齊，看下面列出來的值就簡單明了了

首先row就是默認的左對齊，緊接著的row-reverse就是反向了，也就是右對齊。然后column就是縱對齊了，最后一個屬性也是反向了。如果還不明白就看下面幾張圖

?

?

?

　　2、flex-wrap，css中看到wrap都跟行有關，那么其實也就是換不換行了，屬性值默認是不換行，也就是nowrap。設置flex-wrap：wrap就是換行了。

flex-wrap：wrap-reverse就不用再說了吧，就是反過來，wrap換行開始是第一行在上，reverse就是最后一行在上面了。

?

　　3、flex-flow，該屬性可以將剛才上面的兩個屬性串聯起來，例如flex-flow：row-rever? wrap。比較簡單就不寫那么詳細了

?

　　4、justify-content，很明顯就是容器內容的對齊屬性了。不過在內容對齊時，得先看flex-direction的值是關于哪條軸對齊了。

　　　　flex-start：在主軸上由左或者上開始排列；?

?　　　　flex-end：在主軸上由右或者下開始排列；?

　　　　center：在主軸上居中排列 ；

　　　　space-between：在主軸上左右兩端或者上下兩端開始排列

?

　　　　space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

　　　　前面3個比較容易懂，后面兩個值是什么意思呢，無圖言吊，直接上圖

space-between值就是兩邊對齊后，剩下的空間平均分配，space-around其實也就是每個子項都有著相同的margin-left和margin-right。

?

?

　　5、align-items，該屬性有5個值：?flex-start ，flex-end ， center ， baseline ， stretch。

很容易與下面記錄的第6個屬性align-content混淆，先來簡單的區分一下：align-content是使用時是針對于多行內容下，而align-items是單行或者多行內容都可以使用，這樣一分就清晰很多了。現在來看一下幾個屬性值的demo圖

6、align-content，該屬性有5個值：?flex-start ，flex-end ， center ， space-between，space-around， stretch。詳情看下面demo圖

以上6點就是在父容器的屬性，下面說一下在子項的幾個屬性。

1、order?，設置order屬性也跟排序有關，order翻譯過來就是“順序”，那么在子項中，設置了order后改變它的值即可改變子項在排列中的順序，值越小那么越靠前，相反，值越大越靠后，看下面demo圖

?

2、flex-grow?，grow英文翻譯過來就是發展、生長的意思，也可以理解為縮放，ok，既然是知道是縮放了那么理解起來就容易多了。flex-grow的值是number，默認值是0，就是說即使父容器存在剩余空間老子也不要，那么如果子項

都設置了1，即是每個人平分他爸的家產，等比例平分。如果值不一樣，比如1、1、2、1，那么值是2的那一項就會比1的那一項多一倍的位置，直接看demo圖吧

?

3、flex-shrink?，該屬性是當父容器空間不足，子項內容超出容器時，子項進行縮放，但是是在父元素不設置flex-wrap換行的情況下。默認值是0，也就是不進行縮放，占原來元素內容寬度大小。值越大那么縮小的就越大。看一下下面的demo圖

4、flex-basis ，該屬性可以為某個子項定義寬度，比如我開始就要300px寬度，那么flex-basis：300px；然后父容器再根據自身寬度減去300px后再分配其他子項的寬度，默認值是auto，子項設置了寬度則占據空間就是寬度，沒有設置就是占據自身的內容寬度。

當一個父容器寬度是400,有5個子項，每個寬度是50px，其中一個flex-basis設置的值是200px；那么就是剛好占滿父容器，當寬度總和超出父容器寬度時，沒有設置flex-wrap換行的話便會等比例進行縮小。

5、flex?，該屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。該屬性有兩個快捷值auto和none，構建項目的時候可以優先使用auto，因為如果獨立賦值的話瀏覽器會去推算相關比例，存在誤差。

　　flex默認值 ==??flex:0 1 auto；

　　flex:none ==?flex:0 0 auto；　

　　flex:auto ==?flex:1 1 auto；

6、align-self?，和上面父容器的align-items是類似的屬性，他可以為某個子項定義不一樣的排列方式，也就是可以覆蓋父容器的aligh-items的屬性，看一下demo圖

，父容器設置了align-items：flex-start，然后子項3號設置了align-self：flex-end，那么他自身的對齊排列也就出現區別了，該屬性其他屬性跟align-items差不多，不一一列舉了。

?

?

兩個月沒記錄學習內容了，發生了太多事，這一年帶走了太多東西。大家天冷記得添衣，共勉。

莫問閑愁都幾許

一川煙草

滿城飛絮

梅子黃時雨

?