本系列文章將會(huì)對(duì)CSS的flex布局做一個(gè)簡(jiǎn)單的介紹，希望讀者朋友們能夠?qū)λ墓δ苡幸粋€(gè)整體的認(rèn)知，在工作中可以自由的運(yùn)用。

這是本系列文章的第一篇，主要介紹flex布局中元素的收縮和擴(kuò)展。

如果要使用flex布局，那么第一個(gè)使用到的CSS屬性一定是display: flex，使用它可以聲明出一個(gè)上下文。在這里，它有一套獨(dú)有的元素渲染規(guī)則。

現(xiàn)在，我們?cè)谶@個(gè)上下文里加入一些元素。和上下文外面的規(guī)則不同，上下文內(nèi)的元素會(huì)按照主軸方向（本篇文章中，主軸方向?yàn)閺淖蟮接遥┮来闻帕?，即使這是一個(gè)塊級(jí)元素，例如div。

代碼示例：

<style>
    .wrapper{
        display: flex;
        border: 1px solid #ccc;
    }
    .box{
        padding: 5px;
        background: #333;
        color: #fff;
        border: 1px solid #fff;
    }
    </style>
    <div class="wrapper">
        <div class="box">內(nèi)容1</div>
        <span class="box">內(nèi)容2內(nèi)容2</span>
        <div class="box">內(nèi)容3內(nèi)容3內(nèi)容3</div>
    </div>

顯示效果：

顯示效果

上述效果是上下文內(nèi)所有元素的總寬小于上下文寬的情況。通俗的說(shuō)，就是上下文內(nèi)的元素又小又少，上下文沒(méi)有被裝滿。那如果上下文裝不下所有元素會(huì)怎么樣？

我現(xiàn)在把瀏覽器窗口縮小，讓上下文容不下所有元素。

瀏覽器窗口縮小后效果

文字換行了，上下文是剛好被裝滿的狀態(tài)。

我一定要讓上下文溢出，所以決定給里面的元素都加上width屬性，明確地指定寬度。

修改后的代碼：

    <style>
    .wrapper{
        display: flex;
        border: 1px solid #ccc;
    }
    .box{
        padding: 5px;
        background: #333;
        color: #fff;
        border: 1px solid #fff;
    }
    .w100{
        width: 100px;
    }
    </style>
    <div class="wrapper">
        <div class="box w100">內(nèi)容1</div>
        <span class="box w100">內(nèi)容2內(nèi)容2</span>
        <div class="box w100">內(nèi)容3內(nèi)容3內(nèi)容3</div>
    </div>

指定寬度后效果

上下文還是剛剛被裝滿的狀態(tài)。而且，設(shè)置的寬度竟然失效了?。。?/p>

為什么這樣？這是flex布局的特性，如果上下文內(nèi)空間不足，就會(huì)讓上下文內(nèi)元素按比例收縮，使上下文恰好被充滿。

那這種收縮是可控的嗎？答案是肯定的。

flex-shrink屬性可以控制子元素收縮的比例，它的默認(rèn)值是 1，即 flex-shrink: 1，每個(gè)元素按照自己寬的比例收縮。比如 三個(gè)元素的寬分別為 100px，200px，300px，上下文的寬度為200px。超出的寬度為 100 + 200 + 300 - 200，即 400。這需要收縮的400px寬度由三個(gè)元素按照自身寬度的比例平分，每個(gè)元素分別收縮 100 / 600 * 400, 200 / 600 * 400，300 / 600 * 400，即66.66px，133.33px，200px。

示例代碼：

<style>
    .wrapper{
        display: flex;
        border: 1px solid #ccc;
    }
    .box{
        padding: 5px;
        background: #333;
        color: #fff;
        border: 1px solid #fff;
    }
    .w100{
        width: 100px;
    }
    .w200{
        width: 200px;
    }
    .w300{
        width: 300px;
    }
    </style>
    <div class="wrapper w200">
        <div class="box w100">內(nèi)容1</div>
        <span class="box w200">內(nèi)容2內(nèi)容2</span>
        <div class="box w300">內(nèi)容3內(nèi)容3內(nèi)容3</div>
    </div>

收縮效果展示

如果你想要某個(gè)元素不收縮，可以為它設(shè)置 flex-shrink: 0。如果想要某個(gè)元素收縮的更多一些，可以為它設(shè)置 flex-shrink: 2，flex-shrink: 3 或者更多。

如果給每一個(gè)子元素都設(shè)置flex-shrink: 0，每一個(gè)元素都不想收縮，那么上下文就溢出了。

<style>
    .wrapper{
        display: flex;
        border: 1px solid #ccc;
    }
    .box{
        padding: 5px;
        background: #333;
        color: #fff;
        border: 1px solid #fff;
    }
    .w100{
        width: 100px;
    }
    .w200{
        width: 200px;
    }
    .w300{
        width: 300px;
    }
    .shrink0{
        flex-shrink: 0;
    }
    .shrink2{
        flex-shrink: 2;
    }
    .shrink3{
        flex-shrink: 3;
    }
    </style>
    <div class="wrapper w200">
        <div class="box w100 shrink0">內(nèi)容1</div>
        <span class="box w200 shrink0">內(nèi)容2內(nèi)容2</span>
        <div class="box w300 shrink0">內(nèi)容3內(nèi)容3內(nèi)容3</div>
    </div>

終于看到你溢出的樣子~

與收縮功能類似，我們也可以在上下文未填滿時(shí)，通過(guò)flex-grow擴(kuò)展里面的元素。flex-grow的默認(rèn)值為0，即 flex-grow: 0，默認(rèn)元素不做擴(kuò)展。

與收縮功能不同的是，擴(kuò)展的大小依據(jù)flex-grow屬性值計(jì)算，與元素本身的寬度無(wú)關(guān)。比如為每個(gè)元素設(shè)置flex-grow: 1，它們會(huì)平分多余的空間，與自身的寬度無(wú)關(guān)。

<style>
    .wrapper{
        display: flex;
        border: 1px solid #ccc;
    }
    .box{
        padding: 5px;
        background: #333;
        color: #fff;
        border: 1px solid #fff;
    }
    .w100{
        width: 100px;
    }
    .w200{
        width: 200px;
    }
    .w400{
        width: 400px;
    }
    .grow1{
        flex-grow: 1;
    }
    </style>
    <div class="wrapper w400">
        <div class="box w100 grow1">內(nèi)容1</div>
        <span class="box w200 grow1">內(nèi)容2內(nèi)容2</span>
    </div>

各元素?cái)U(kuò)展了相同的寬度

如果想要某個(gè)元素?cái)U(kuò)展的更多一些，可以為它設(shè)置 flex-grow: 2，flex-grow: 3 或者更多。

除上述外，還有一種被廣泛使用的伸縮規(guī)則，為元素設(shè)置flex屬性，它可以讓元素按照指定比例瓜分上下文內(nèi)剩余空間。

示例代碼：

    <style>
    .wrapper{
        display: flex;
        border: 1px solid #ccc;
    }
    .box{
        padding: 5px;
        background: #333;
        color: #fff;
        border: 1px solid #fff;
    }
    .w100{
        width: 100px;
    }
    .w200{
        width: 200px;
    }
    .w400{
        width: 400px;
    }
    .flex1{
        flex: 1;
    }
    .flex2{
        flex: 2;
    }
    </style>
    <div class="wrapper w400">
        <div class="box w100">內(nèi)容1</div>
        <span class="box flex1">內(nèi)容2</span>
        <span class="box flex2">內(nèi)容3</span>
    </div>

flex

上下文的寬為 400，第一個(gè)元素的寬通過(guò)width屬性指定為 100，剩余 300的寬由剩余2個(gè)元素按比例分配。第二個(gè)元素的寬為 300 * (1 / (1 +2))，即 100px，第三個(gè)元素的寬為 300 * (2 / ( 1 + 2 ))，即 200px。

下一篇文章將繼續(xù)介紹flex布局在元素排列上的規(guī)則。