這篇文章對flex不熟也可以看。這篇文章只講這三個屬性。為了簡單化，不會提到主軸交叉軸，也不講方向，默認(rèn)方向就是水平方向從左往右。但并不影響對這三個概念的理解。

如果你覺得對flex比較了解，可以直接從第二小節(jié)開始看起。

1.開啟flex

我們正常寫三個div。默認(rèn)情況下是垂直排列的。只要開啟flex,一行代碼就可以實現(xiàn)水平布局。這是flex最有用的一點。

<div id="box">
     <div class="div1 fontCenter">1</div>
     <div class="div2 fontCenter">2</div>
     <div class="div3 fontCenter">3</div>
</div>

        #box {
            /*display: flex;*/
            height: 500px;
            width: 1000px;
            background-color: plum;
        }

        .div1{
            width: 150px;
            height: 150px;
            background-color: lightblue;
        }
        .div2{
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .div3{
            width: 150px;
            height: 150px;
            background-color: lightsalmon;
        }

        .fontCenter{
            text-align: center;
            line-height: 150px;
            font-size: 50px;
        }

1.1使用flex實現(xiàn)水平排列

我們給容器原始#box加上display: flex;這行。表示開啟flex。這時候就已經(jīng)實現(xiàn)了水平排列功能。非常的簡單，這個功能用浮動來做就麻煩的多。

  #box {
            display: flex;
            height: 500px;
            width: 1000px;
            background-color: plum;
        }

1.1.2 左右分區(qū)

我想實現(xiàn)box1和box2在左邊，box3在右邊。這個功能通過flex非常的好實現(xiàn)。只需要給box3設(shè)置margin-left:auto。box3就會把能margin-left的都margin了。自己也就到了最右邊，也就實現(xiàn)了我們想要的功能。

        .div3{
            width: 150px;
            height: 150px;
            margin-left: auto;
            background-color: lightsalmon;
        }

如果你想要把box2和box3一起移動到最右邊，只需要把margin-left:auto設(shè)置在box2上面就可以了。

        .div2{
            width: 150px;
            height: 150px;
            margin-left: auto;
            background-color: lightgreen;
        }

2.理解flex-basis

flex-basis這個屬性是非常重要的一個屬性，也是最容易混淆的一個屬性。最開始以為和width屬性差不多，也就沒怎么重視。不弄清楚會造成和他相關(guān)屬性的理解混亂。
其實flex-basis非常的好理解，你只需要逐字逐句的把他的定義理解一遍就行。

定義：
它的初始值是 auto，此時瀏覽器會檢查元素是否設(shè)置了 width 屬性值。如果有，則使用 width 的值作為 flex-basis 的值；如果沒有，則用元素內(nèi)容自身的大小。如果 flex-basis 的值不是 auto，width 屬性會被忽略。
分為兩種情況：
1.沒有設(shè)置flex-basis，這時候flex-basis為默認(rèn)值auto。
這種情況很常見，就是只設(shè)置了display:flex的時候。別的flex屬性都沒設(shè)置。此時瀏覽器會檢查元素是否設(shè)置了 width 屬性值。如果有，則使用 width 的值作為 flex-basis 的值；如果沒有，則用元素內(nèi)容自身的大小。 這句話暗含了一個很重要的信息就是在flex里面，flex-basis是優(yōu)先用于處理寬度的。更切確的說，在flex里面，根本不存在width,如果用戶沒設(shè)置flex-basis的值，flex系統(tǒng)會把width的值賦值給flex-basis。flex-basis有了值后，width被忽略，變成了工具人。
2.設(shè)置了flex-basis的值，這時候width會忽略，元素的寬度用flex-basis的值表示。
這點就更加驗證了在flex里面，flex-basis是優(yōu)先于width來處理寬度的。在flex里面只要用戶設(shè)置了flex-basis的值，我flex系統(tǒng)都不正眼瞧你width。
總之，在設(shè)置了display:flex之后，你最好設(shè)置flex-basis的值，并且忽略width。 雖然width也是可以用，但就顯得拖泥帶水。就像你一只腳已經(jīng)踏入我flex這個先進(jìn)的布局系統(tǒng)里面，另一只腳還停留在原始的CSS里面。既然你已經(jīng)用了flex這個系統(tǒng)，用就用全套，就用我flex-basis吧。而且我還可以和我另兩個兄弟flex-grow 和 flex-shrink一起配合使用。組成flex三巨頭。
雖然說flex-basis是替換了width,并且他和width起到的作用是差不多的。但他們還是不同的。
當(dāng)width為0的時候，我們是看不到元素的。但當(dāng)flex-basis為0,或者為auto并且width沒有設(shè)置值的時候(默認(rèn)值為0)，該元素的大小是由內(nèi)容大小決定的。也就是只要有內(nèi)容，flex-basis是不會看不到元素的。這在后面會從例子中體現(xiàn)。

設(shè)為auto和0也是有區(qū)別的。一個最明顯的區(qū)別就是為0的時候，如果內(nèi)容文字有空格是自動換行的。
這個可以通過設(shè)置white space:nowrap解決。auto就沒有這個問題。
例一：
div1同時設(shè)置了width和 flex-basis，width的值將會失效。

        .box1{
            width: 150px;
            height: 150px;
            flex-basis: 200px;
            background-color: lightsalmon;
        }

        .box2{
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }

        .box3{
            width: 150px;
            height: 150px;
            background-color: lightblue;
        }

寬度使用的是flex-basis的值而不是width的。

通常用法：
這里給父元素加了寬高和背景。

        #content {
            display: flex;
            width: 1000px;
            height: 500px;
            background-color: lightpink;
        }
        .box1{
            height: 150px;
            flex-basis: 15%;
            background-color: lightsalmon;
        }

        .box2{
            height: 150px;
            flex-basis: 15%;
            background-color: lightgreen;
        }

        .box3{
            height: 150px;
            flex-basis: 20%;
            background-color: lightblue;
        }

3.理解flex-grow

在設(shè)置了flex-basis后，元素就占用了一定的空間。但還留有一些空間。這些空間可以通過flex-grow來占領(lǐng)。
以上面的這種情況為例，box1,box2,box3分別占據(jù)了父元素的15%，15%和20%的寬度，一共占據(jù)了50%寬度。還剩下50%的空白空間。

我們可以給box設(shè)置flex-grow屬性。分別給三個box設(shè)置flex-grow:1。表示權(quán)重都是1，那么三個box將會平分剩下的空間。

        .box1{
            height: 150px;
            flex-basis: 15%;
            flex-grow: 1;
            background-color: lightsalmon;
        }

        .box2{
            height: 150px;
            flex-basis: 15%;
            flex-grow: 1;
            background-color: lightgreen;
        }

        .box3{
            height: 150px;
            flex-basis: 20%;
            flex-grow: 1;
            background-color: lightblue;
        }

父元素的寬度是1000px。
以box1為例，box1原來的寬度是1000*15%=150。grow的寬度是1000 * 50% * 1/3=500/3。所以box1最終寬度是150+500/3。大家可以在開發(fā)者工具對比一下前后寬度就明白了。

如果子元素flex-grow的總和超過1，那么就是按照上面的方式，按比例(權(quán)重)瓜分剩下的空間。
還存在一種情況是flex-grow的總和沒有超過1的，比如出現(xiàn)小數(shù)的情況。

        .box1{
            height: 150px;
            flex-basis: 15%;
            flex-grow: 0.3;
            background-color: lightsalmon;
        }

        .box2{
            height: 150px;
            flex-basis: 15%;
            flex-grow: 0.3;
            background-color: lightgreen;
        }

        .box3{
            height: 150px;
            flex-basis: 20%;
            flex-grow: 0.1;
            background-color: lightblue;
        }

這種情況就不會完全瓜分剩下的全部空間。而是子元素將自己的flex-grow值和剩余空間相乘，計算出的值就是增加的值。以box1為例，剩余空間是100050%=500，原來的寬度是10000.2=200，500*0.3=150這是增加的值，最后寬度是200+150=350。
和總和超過一的區(qū)別就是，不是按照各個子元素直接的權(quán)重比例來分配了，而是直接用flex-grow這個值乘以剩余空間來獲取增長的值。

3.1 flex-grow的實際用途

其實上面提到的兩種用法在實際開發(fā)中基本是用不上的。誰會給已經(jīng)設(shè)置好寬度的元素又增加點寬度呢？實際上，下面這種用法才是最常見的。
下面這個效果在網(wǎng)頁里面是經(jīng)常用到的。左邊是主要內(nèi)容區(qū)，右邊是一些小模塊。使用flex-grow可以快速實現(xiàn)這樣的功能。
我們想實現(xiàn)的效果是box1:box2=3,也就是box1寬度是box2寬度的3倍。

         #content{
             display: flex;
             height: 700px;
             font-size: 50px;
         }
         .box1{
             height: 100%;
             flex-grow: 3;
             background-color: lightgreen;
         }
         .box2{
             height: 100%;
             flex-grow: 1;
             background-color: lightblue;
         }

<div id="content">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

但實際上，如果你打開開發(fā)者工具，測量一下，box1和box2的寬度，你會發(fā)現(xiàn)兩者比例根本不是3:1。這是為什么?
也許你一開始就看出我這樣寫是有問題的，那么恭喜你，你對flex理解的很深刻。原因出在你沒有設(shè)置flex-basis=0上。注意，一定要設(shè)置為0，不寫flex-basis默認(rèn)值是auto。為什么設(shè)置flex-basis為0就可以了呢？

我們來分析一下上面的代碼的執(zhí)行邏輯：
上面的代碼我們沒有設(shè)置flex-basis，也沒有設(shè)置width。flex-basis等于auto,width沒有值。所以使用內(nèi)容的寬度。 不信你把flex-grow屬性都去掉，就會看到下面的效果。
這里引出flex-basis和width一個重要的區(qū)別。flex-basis默認(rèn)值是auto,并且沒有設(shè)置width的時候，flex-basis的值等于內(nèi)容的寬度，值并不是為0的。這就是導(dǎo)致上面代碼box1和box2不能實現(xiàn)3:1比例的原因。要想實現(xiàn)box1和box2比例是3:1，box1和box2的起始寬度必須是0。這樣flex-grow就可以按比例平分父元素空間了。

只需要給兩個box都加上flex-basis:0就可以實現(xiàn)按比例平分的效果了。

         .box1{
             height: 100%;
             flex-grow: 3;
             flex-basis: 0;
             background-color: lightgreen;
         }
         .box2{
             height: 100%;
             flex-grow: 1;
             flex-basis: 0;
             background-color: lightblue;
         }

4.理解flex-shrink

在《深入理解CSS》這本書里面，有下面這樣一個圖。給三個元素設(shè)置flex-basis都等于40%。將會溢出一部分。

我也照著做了一遍。

<div id="content">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

        #content{
            display: flex;
            height: 500px;
            width: 1000px;
            background-color: lightpink;
            font-size: 50px;
        }
        .box1{
            height: 200px;
            flex-basis: 40%;
            background-color: lightgreen;
        }
        .box2{
            height: 200px;
            flex-basis: 40%;
            background-color: lightblue;
        }
        .box3{
            height: 200px;
            flex-basis: 40%;
            background-color: lightsalmon;
        }

發(fā)現(xiàn)和想象中的不一樣。box3并沒有溢出。但三個flex-basis加起來確實是超出父元素寬度了。
但我心想，大牛寫的書，應(yīng)該不會騙我。一定是我寫錯了。但我沒有寫錯，書里面說的也沒錯。

問題就出在flex-shrink身上。可是我也沒寫flex-shrink啊。你沒寫flex會自動給你添加上，而且默認(rèn)值還不是0，而是1。
實際上，你上面的代碼等價于下面的代碼。

        .box1{
            height: 200px;
            flex-basis: 40%;
            flex-shrink: 1;
            background-color: lightgreen;
        }
        .box2{
            height: 200px;
            flex-basis: 40%;
            flex-shrink: 1;
            background-color: lightblue;
        }
        .box3{
            height: 200px;
            flex-basis: 40%;
            flex-shrink: 1;
            background-color: lightsalmon;
        }

flex-shrink的作用和flex-grow相反。當(dāng)合計的flex-basis的總寬度超過父元素的總寬度的時候。flex-shrink會把子元素按比例減少，把溢出的寬度抹沒。
比如前面的例子總寬度是40%*3=120%，也就是溢出了20%的寬度，也就是1000 * 20%=200px的寬度。怎么把這200px給抹沒掉呢？就是從前面三個子元素上面扣寬度。三個子元素的flex-shrink都是1，也就是平均扣除200/3px。
就能實現(xiàn)抹沒的效果。打開開發(fā)者工具，量一下子元素的寬度，確實是減少了這些寬度的。

如果說，我就想有這種溢出的效果，那么就把flex-shrink都設(shè)為0就好了。就可以達(dá)到下面這樣效果。也就是書上提到的效果。

5.flex屬性的使用

介紹完了flex-basis，flex-grow和flex-shrink后，我們可以用他們的一種精簡寫法flex。

例如：
我們給三個子元素都寫上flex:1,就可以實現(xiàn)三等分的效果。

        .box1{
            height: 200px;
            flex: 1;
            background-color: lightgreen;
        }
        .box2{
            height: 200px;
            flex: 1;
            background-color: lightblue;
        }
        .box3{
            height: 200px;
            flex: 1;
            background-color: lightsalmon;
        }

這個效果是真正三等分的。

這里的flex:1相當(dāng)于下面的寫法。三個值分別表示flex-grow,flex-shrink,flex-basis。
注意，flex:1和只寫一個flex-grow:1是不一樣的。
寫成flex:1，flex-shrink,flex-basis的默認(rèn)值是1和0%。
而寫成flex-grow:1,flex-shrink,flex-basis的默認(rèn)值是1和auto。也就是flex-basis是不同的。
而flex-basis值為0和auto的不同前面已經(jīng)驗證過了，就是auto在沒有width的情況下寬度是內(nèi)容的寬度。這會導(dǎo)致flex-grow不能整體平均分。具體見flex-grow小節(jié)。

flex:1 1 0%

或者

flex-grow:1
flex-shrink:1
flex-basis:0%

除了flex-basis會單獨(dú)當(dāng)類似width使用外。flex-grow,flex-shrink基本是很少使用的。
flex-grow也很少單獨(dú)使用，因為使用flex-grow的時候，一般就是為了按比例分配布局。這時候要同時設(shè)置flex-basis:0。
所有一般使用下面的方式來替代單獨(dú)使用flex-grow。因為這種方式可以快速達(dá)到按比例分配布局。

flex:1

至于flex-shrink基本就不會用，也就設(shè)個默認(rèn)值讓子元素不會超出。

使用flex實現(xiàn)常用效果

1.包裹內(nèi)容水平排列
設(shè)置flex后，子元素也不要設(shè)置width,就會出現(xiàn)這種包裹內(nèi)容水平排列的效果。

2.第一個子元素固定，第二個子元素?fù)螡M剩余高度。
flex-shrink的值是無所謂的，因為并沒有超出父容器寬度。

3.三足鼎立型。兩邊固定寬度，中間填滿剩余空間

4.按比例劃分
文章來源地址http://www.zghlxwxcb.cn/news/detail-811353.html

到了這里，關(guān)于深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 實戰(zhàn)講解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！