Flex彈性盒子詳解：從量變到質變的理解

Flex彈性盒子

在前端css3中有個非常重要的屬性，就是彈性盒子了，他在頁面佈局中起到的作用可謂是有着王霸之業，那麼我們如何正確的使用flex佈局呢？讓我來介紹一下吧。我們可以將整個flex佈局分成兩個部分，一部分是在父元素上可以設置的屬性，如：flex-direction、flex-wrap、justify-content、align-items、align-content屬性。另一部分就是在設置flex佈局父元素的子元素上可以設置的屬性，如：order、align-self、flex-basis、flex-grow、flex-shrink屬性。

首先，我們需要啓用flex彈性盒子，非常簡單，在需要啓用的父元素上設置該屬性就可以

display:flex

接下來先介紹下可以設置在父元素上的屬性，在父元素上設置的屬性，看一下配圖，效果就一目瞭然啦

1、設置display:flex上的元素可以擁有的屬性

(1) flex-direction：設置主軸的方向。

• row：默認值。自左向右
• row-reverse:對齊方式與row相反。
• column:自下向上
• column-reverse:對齊方式與column相反。

（2）flex-wrap：多行文本是否換行

• nowrap：默認值。不換行
• wrap：換行
• wrap-reverse：從反過來換行，把底當成開始

（3）justify-conent：設置主軸的對齊方向

• flex-start：從開始位置對齊
• flex-end：從結束位置對齊
• center：劇中對齊
• space-between：向兩邊劇中對齊，兩邊無空隙，中間空隙相同
• space-around：向中間劇中對齊,兩邊的空隙相同，大小是中間空隙的一半

（4）align-items：主要針對單行文本對齊方式

• stretch：默認值。如果子元素沒有高度，那麼設置stretch會將高度撐開爲父元素的高度
• baseline：基於文字對齊，與寬高無關，基於文字底線開始對齊
• flex-start：交叉軸開始對齊
• flex-end：交叉軸結束對齊
• center ：交叉軸居中對齊

（5）align-content：只有多行文本才起作用

• stretch：默認值。剩餘空間被所有行平分，以擴大它們的側軸尺寸。
• flex-start：從交叉軸開始位置對齊
• flex-end：從交叉軸結束位置對齊
• center：居中對齊
• space-between：向兩邊(上下邊)劇中對齊，兩邊無空隙，中間空隙相同
• space-around：向中間對齊，兩邊留有相同的空間

2、子元素上擁有的屬性

（1）order：設置子元素出現的順序。默認爲0，數值越小，優先級越低

其實非常簡單，也就是說，我們給某個子元素設置order的數值越大的時候，他所在的位置也就越靠後。比如我給如下，數字2的方塊設置的order爲3，數字3的方塊設置的order爲2：

（2）align-self：設置子元素單獨在交叉軸上的對齊方式。默認是auto

• auto：默認值。計算值爲元素的父元素的’align-items’值，如果其沒有父元素，則計算值爲’stretch’。
• flex-start：交叉軸起始位置的邊界緊靠住該行的側軸起始邊界。
• flex-end：交叉軸起始位置的邊界緊靠住該行的側軸結束邊界
• center：劇中對齊
• baseline：該值將參與基線對齊
• stretch：如果設置了高度，則按照heigh，如果未設置，則拉伸爲盒子高度

接下來的三個屬性：basis、shrink和grow纔是整個flex佈局最重要的屬性。我們一起了解一下吧

（3）flex-basis：設置彈性盒伸縮基準值。可以簡單理解爲覆蓋width，設置以後，width失效。

• auto：默認值。無特定寬度值，取決於其它屬性值
• 像素值
• 百分比
• content：基於內容自動計算寬度

這個值，在通常情況下，可以理解爲width，但是當我們設置文本時，會發現其中的不同之處。當設置flex-basis後，如果內容區中的內容超出flex-basis所設置的寬度時，不會截斷，會撐大寬度。而width不會

• 在沒有設置 width 的前提下，設置 flex-basis 的值時元素的最小值
• 在設置width的前提下，設置的 flex-basis 的值是最小值，當元素內容超出了flex-basist的內容區域時，那麼width所設置的寬度爲當前盒子的最大值。(flex-basis < 元素的寬度 < width)
• 如果 flex-basis 大於 width 則 flex-basis 的值是最大值寬度

（4）flex-grow：設置彈性盒的擴展比率。默認值是0。不擴展

​ 當一行還有剩餘空間的時候，就會按照 flex-grow 設置的比例進行分配剩餘的空間，調整大小

（5）flex-shrink：設置彈性盒的收縮比率。默認值是1。

計算公式：

1、計算加權值：每個元素 真實內容區的大小（去掉border）* shrink 值之和

2、計算壓縮值：（真實內容區大小 * shrink值 ）/ 加權值 * 多出來的像素

備註：要注意有border、padding和無border、padding的區別，計算的爲去掉border、padding的寬度

舉個例子：

/* 
計算方式 
1、計算加權值 真實內容區的大小 * shrink值
200px*1 + 200px*1 + 400px*3 =1600px
2、
第一個盒子壓縮值:
200px * 1 
——————————  * 200px(多餘的像素) = 25px  
1600px

第二個盒子壓縮值:
200px * 1 
——————————  * 200px(多餘的像素) = 25px  
1600px

第三個盒子壓縮值:
400px * 3 
——————————  * 200px(多餘的像素) = 150px  
1600px
*/

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>
<style>
    .wrapper{
		width:600px
    }
    .content{
        width: 200px;
        height: 100px;
        flex-shrink: 1;
    }
    .content:nth-of-type(3){
        width: 400px;
        flex-shrink: 3;
    }
</style>

複合屬性：設置或檢索彈性盒模型對象的子元素如何分配空間。下面時常用的複合屬性，和其對應的簡寫形式。

複合屬性	簡寫
flex:1 1 auto	flex:auto
flex:0 0 auto	flex:none
flex:1 1 0%	flex:1

好啦，講完了flex佈局，我們再來看幾個案例，鞏固一下吧！

案例1：劇中效果

<div class="wraper">
    <div class="content"></div>
</div>
<style>
    .wraper{
        width: 300px;
        height: 300px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .content{
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        border: 1px solid red;
    }
</style>

案例2：可動態增加導航欄

<div class="wraper">
    <div class="items">天貓</div>
    <div class="items">淘寶</div>
    <div class="items">聚划算</div>
    <div class="items">聚划算</div>
</div>

<style>
    .wraper{
        width: 300px;
        height: 300px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .items{
        height: 30px;
        box-sizing: border-box;
        border: 1px solid red;
        flex: 1 1 auto;
        text-align: center;
        line-height: 30px;
    }
</style>

案例三：中間固定，兩邊自適應 其中一個固定，另外兩個不固定等

<div class="wraper">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

<style>
    .wraper{
        width: 400px;
        height: 200px;
        border: 1px solid black;
        display: flex;
        resize: both;
        overflow: hidden;
    }
    .content{
        flex: 1 1 auto;
        height: 100px;
        box-sizing: border-box;
        border: 1px solid red;
    }
    .content:nth-of-type(2){
        flex: 0 0 200px;
    }
</style>

案例四：聖盃佈局

<div class="wraper">
    <div class="header">header</div>
    <div class="contain">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>

<style>
    .wraper{
        width: 400px;
        height: 400px;
        border: 1px solid black;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        resize: both;
    }
    .header,.footer,.right,.left{
        flex: 0 0 20%;
        border: 1px solid green;
        box-sizing: border-box;
    }
    .contain{
        flex: 1 1 auto;
        display: flex;
    }
    .center{
        flex: 1 1 auto;
    }
</style>