此文已由作者張含會授權網易雲社群釋出。

歡迎訪問網易雲社群，瞭解更多網易技術產品運營經驗。

關於盒模型佈局

如何實現兩欄佈局？

(表格)
流式，
浮動，
定位

如何選擇？

流式 > 浮動 > 定位

彈性盒模型FlexBox

• 容器和專案 .box .item

• 設定容器flex佈局

    .box{      display: flex;        
    }

  // 行內元素

    .box{      display: inline-flex;  }

• 容器屬性

1. flex-direction 容器內專案的排列方向（常用）

    .box {     flex-direction: row | row-reverse | column | column-reverse; }

2. flex-wrap 容器內專案換行方式

    .box{     flex-wrap: nowrap | wrap | wrap-reverse; }
    注意：有些瀏覽器不支援

3. flex-flow 是flex-direction和flex-wrap的簡寫屬性

1. justify-content 容器內專案的水平對其方式 （常用）

   .box {

    justify-content: flex-start | flex-end | center | space-between | space-around;

   }

2. align-items 容器內專案的垂直對齊方式（常用）

    .box {     align-items: stretch | flex-start | flex-end | center | baseline ; }

3. align-content 容器內專案的垂直對齊方式，多行生效，單行不生效

    .box {
        align-content: stretch | flex-start | flex-end | center | space-between | space-around ;
    }

所以需要記住：    flex-direction，justify-content，align-items

• 專案屬性

1. order 排列順序，越小越靠前，預設為0，可以為負數

    .item{     order: <integer>; }

2. flex-grow 擴張比例，預設為0

    .item{     flex-grow: <number>; }

3. flex-shrink 收縮比例，預設為1

    .item{     flex-shrink: <number>; }

4. flex-basis 分配多餘空間前佔據的空間

    .item {     flex-basis: auto | <length>; /* default auto */
    }

5. flex 是    flex-grow，flex-shrink，flex-basis 的簡寫

    .item {     flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } .item{     flex: 1; }

6. align-self 專案的對齊方式，覆蓋容器align-items的值

    .item {     align-self: auto | flex-start | flex-end | center | baseline | stretch; }

專案屬性要記住flex

flex-grow 和 flex-shrink如何計算？

flex-grow

對於剩餘空間，按照一定的比例分配到專案，以下例子的分配過程如下：

1. 先計算剩餘空間1000-200-400-200=200

2. 剩餘空間被分成4份，item1佔2/4，item2佔1/4，item3佔1/4

3. item1共佔200+200x2/4=300，item2共佔400+200x1/4=450，item3共佔200＋200x1/4=250

    <div class="box">
        <div class="item">100</div>
        <div class="item">200</div>
        <div class="item">300</div>
    </div>

    .box {
        display: flex;
        width: 1000px;
        height: 300px;
    }
    .item{
        height: 50px;
    }
    .item:first-child{
        flex: 200px 2 1;
    }
    .item:nth-child(2){
        flex: 400px 1 2;
    }
    .item:nth-child(3){
        flex: 200px 1 1;
    }

flex-shrink

對於溢位空間，按照一定的比例收縮到專案，以下例子的分配過程如下：

1. 計算溢位空間200+400+200-400=400

2. 注意flex-shrink是收縮比例， 是基於專案寬度的，加入item1的寬度需要收縮n的比例能滿足條件，根據設定item2應該收縮2n，item2的收縮比例是n，200xn+400x2n+200xn=400，所以n=1/3(0.33)

3. item1所佔的寬度為200x(1-0.33)=133.33，item2所佔寬度為400x(1-2x0.33)=133.33，item3所佔空間為200x(1-0.33)=133.33

注意：

如果設定item1的收縮比是1，item2的收縮比是100，item3的收縮比是1，根據公式計算收縮比例是1/1001，item2所佔空間為400x(1-100x(1/1001))，約等於0，很明顯，如果是0，專案內容是沒辦法顯示的，所以專案的空間不會全部收縮，肯定會預留下專案內容所需要的最小空間，這時候的計算方式會發生變化，假設item2內容所佔最小空間為20，所以item2只能收縮掉400-20=380，剩餘20按比例收縮在item1和item3。

    <div class="box">
        <div class="item">100</div>
        <div class="item">200</div>
        <div class="item">300</div>
    </div>
    .box {        display: flex;        width: 400px;        height: 300px;
        box-sizing: border-box;        background: #0f0;
        justify-content: space-around;
    }
    .item{
      box-sizing: border-box;      height: 50px;  
      background: #f00;      color: #fff;
      line-height: 50px;
    }
    .item:first-child{      flex: 200px 1 1;
    }
    .item:nth-child(2){      flex: 400px 1 2;
    }
    .item:nth-child(3){      flex: 200px 1 1;
    }

免費體驗雲安全(易盾)內容安全、驗證碼等服務

更多網易技術、產品、運營經驗分享請點選。

相關文章：
【推薦】 大資料演算法：排位問題（2）
【推薦】 OBS原始碼編譯開發