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

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

，請(qǐng)?jiān)徯“椎牟攀鑼W(xué)淺，寫的不到位的地方請(qǐng)指正。

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

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

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

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

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

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

?

?

?

　　2、flex-wrap，css中看到wrap都跟行有關(guān)，那么其實(shí)也就是換不換行了，屬性值默認(rèn)是不換行，也就是nowrap。設(shè)置flex-wrap：wrap就是換行了。

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

?

　　3、flex-flow，該屬性可以將剛才上面的兩個(gè)屬性串聯(lián)起來，例如flex-flow：row-rever? wrap。比較簡(jiǎn)單就不寫那么詳細(xì)了

?

　　4、justify-content，很明顯就是容器內(nèi)容的對(duì)齊屬性了。不過在內(nèi)容對(duì)齊時(shí)，得先看flex-direction的值是關(guān)于哪條軸對(duì)齊了。

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

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

　　　　center：在主軸上居中排列 ；

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

?

　　　　space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

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

space-between值就是兩邊對(duì)齊后，剩下的空間平均分配，space-around其實(shí)也就是每個(gè)子項(xiàng)都有著相同的margin-left和margin-right。

?

?

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

很容易與下面記錄的第6個(gè)屬性align-content混淆，先來簡(jiǎn)單的區(qū)分一下：align-content是使用時(shí)是針對(duì)于多行內(nèi)容下，而align-items是單行或者多行內(nèi)容都可以使用，這樣一分就清晰很多了。現(xiàn)在來看一下幾個(gè)屬性值的demo圖

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

以上6點(diǎn)就是在父容器的屬性，下面說一下在子項(xiàng)的幾個(gè)屬性。

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

?

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

都設(shè)置了1，即是每個(gè)人平分他爸的家產(chǎn)，等比例平分。如果值不一樣，比如1、1、2、1，那么值是2的那一項(xiàng)就會(huì)比1的那一項(xiàng)多一倍的位置，直接看demo圖吧

?

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

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

當(dāng)一個(gè)父容器寬度是400,有5個(gè)子項(xiàng)，每個(gè)寬度是50px，其中一個(gè)flex-basis設(shè)置的值是200px；那么就是剛好占滿父容器，當(dāng)寬度總和超出父容器寬度時(shí)，沒有設(shè)置flex-wrap換行的話便會(huì)等比例進(jìn)行縮小。

5、flex?，該屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto。該屬性有兩個(gè)快捷值auto和none，構(gòu)建項(xiàng)目的時(shí)候可以優(yōu)先使用auto，因?yàn)槿绻?dú)立賦值的話瀏覽器會(huì)去推算相關(guān)比例，存在誤差。

　　flex默認(rèn)值 ==??flex:0 1 auto；

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

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

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

，父容器設(shè)置了align-items：flex-start，然后子項(xiàng)3號(hào)設(shè)置了align-self：flex-end，那么他自身的對(duì)齊排列也就出現(xiàn)區(qū)別了，該屬性其他屬性跟align-items差不多，不一一列舉了。

?

?

兩個(gè)月沒記錄學(xué)習(xí)內(nèi)容了，發(fā)生了太多事，這一年帶走了太多東西。大家天冷記得添衣，共勉。

莫問閑愁都幾許

一川煙草

滿城飛絮

梅子黃時(shí)雨

?