怎么在flex布局中計(jì)算flex-grow與flex-shrink

本篇文章為大家展示了怎么在flex布局中計(jì)算flex-grow與flex-shrink，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

CSS 中的 Flex(彈性布局) 可以很靈活的控制網(wǎng)頁(yè)的布局，其中決定 Flex 布局內(nèi)項(xiàng)目寬度/高度的是三個(gè)屬性：
flex-basis, flex-grow, flex-shrink.

flex-basis

　　flex-basis 決定了項(xiàng)目占據(jù)主軸的空間，除非使用 box-sizing 進(jìn)行設(shè)置，否則它將設(shè)置內(nèi)容框的大小，因此當(dāng)你指定一個(gè)flex項(xiàng)的大小時(shí)需要額外小心，因?yàn)樗芸夏馨瑑?nèi)邊距與邊框。

　　你可以為其指定一個(gè)具體的CSS尺寸值，也可以指定其占據(jù)父元素的百分比，它的默認(rèn)值為 auto(根據(jù)內(nèi)容自動(dòng)調(diào)整大小)

<!-- demo-1 -->

  <div class="parent">
    <div class="child1">100px</div>
    <div class="child2">200px</div>
  </div>
  <div class="parent">
    <div class="child1">10%</div>
    <div class="child2">20%</div>
  </div>
  <div class="parent">
    <div class="child1">30%</div>
    <div class="child2">auto</div>
  </div>

  <style>
    .parent {
      width: 500px;
      display: flex;
      margin-bottom: 15px;
      text-align: center;
      background-color: #eeeeee;
    }

    /** 像素值*/
    .parent:nth-child(1) .child1 {
      flex-basis: 100px;
      background-color: #356969
    }
    .parent:nth-child(1) .child2 {
      flex-basis: 200px;
      background-color: #369925;
    }

    /** 百分比 */
    .parent:nth-child(2) .child1 {
      flex-basis: 10%;
      background-color: #356969
    }
    .parent:nth-child(2) .child2 {
      flex-basis: 20%;
      background-color: #369925;
    }

    /** 自動(dòng) */
    .parent:nth-child(3) .child1 {
      flex-basis: 30%;
      background-color: #356969
    }
    .parent:nth-child(3) .child2 {
      flex-basis: auto;
      background-color: #369925;
    }
  </style>

flex-grow

　　flex-grow 設(shè)置當(dāng) flex 容器存在剩余空間(flex容器的大小減去所有flex項(xiàng)的大小之和)時(shí)項(xiàng)目的放大比例，它的默認(rèn)值為 0 (即使存在剩余空間也不放大)。如果所有項(xiàng)目的 flex-grow 屬性值都是相同的，則它們將等分剩余空間，否則，將根據(jù)不同的屬性值所定義的比率進(jìn)行分配。

　　例如，主軸長(zhǎng)度為600px, 項(xiàng)目1占據(jù)50px, 項(xiàng)目2占據(jù)100px, 項(xiàng)目3占據(jù)150px, 則剩余空間為：600px - (50px + 100px + 150px) = 300px

　　假如每個(gè)項(xiàng)目的 flex-grow 屬性值都相同(例如都為1)，則所有項(xiàng)目分配到相同的剩余空間：
　　- 項(xiàng)目1: 300px * (1 / (1 + 1 + 1)) = 100px;
　　- 項(xiàng)目2: 300px * (1 / (1 + 1 + 1)) = 100px;
　　- 項(xiàng)目3: 300px * (1 / (1 + 1 + 1)) = 100px;

  <!-- demo-2 -->

  <div class="parent">
    <div class="child1">50px + 100px</div>
    <div class="child2">100px + 100px</div>
    <div class="child3">150px + 100px</div>
  </div>

  <style>
    .parent {
      width: 600px;
      display: flex;
      text-align: center;
      color: #eee;
    }

    .child1 {
      flex-basis: 50px;
      flex-grow: 1;
      background-color: #0066CC;
    } 

    .child2 {
      flex-basis: 100px;
      flex-grow: 1;
      background-color: #009900;
    }

    .child3 {
      flex-basis: 150px;
      flex-grow: 1;
      background-color: #CC3300;
    }
  </style>

　　假設(shè)每個(gè)項(xiàng)目的 flex-grow 屬性的值并不都是相同的，例如項(xiàng)目1為 1, 項(xiàng)目2為 2, 項(xiàng)目3為 3, 則它們分配到的剩余空間分別為：
　　- 項(xiàng)目1: 300px * (1 / (1 + 2 + 3)) = 50px;
　　- 項(xiàng)目2: 300px * (2 / (1 + 2 + 3)) = 100px;
　　- 項(xiàng)目3: 300px * (3 / (1 + 2 + 3)) = 150px;

  <!-- demo-3 -->

  <div class="parent">
    <div class="child1">50px + 50px</div>
    <div class="child2">100px + 100px</div>
    <div class="child3">150px + 150px</div>
  </div>

  <style>
    .parent {
      width: 600px;
      display: flex;
      text-align: center;
      color: #eee;
    }

    .child1 {
      flex-basis: 50px;
      flex-grow: 1;
      background-color: #0066CC;
    } 

    .child2 {
      flex-basis: 100px;
      flex-grow: 2;
      background-color: #009900;
    }

    .child3 {
      flex-basis: 150px;
      flex-grow: 3;
      background-color: #CC3300;
    }
  </style>

　　要是屬性值為小數(shù)怎么辦呢？這里分兩種情況：
　　1. 所有flex項(xiàng)的 flex-gorw 屬性值之和大于1，仍然按照上述方式進(jìn)行計(jì)算；
　　2. 所有flex項(xiàng)的 flex-gorw 屬性值之和小于1，基值按照1來(lái)進(jìn)行計(jì)算，例如項(xiàng)目1為 0.2, 項(xiàng)目2為 0.3, 項(xiàng)目3為 0.4, 則它們分配到的剩余空間分別為：
　　- 項(xiàng)目1: 300px * (0.2 / 1) = 60px;
　　- 項(xiàng)目2: 300px * (0.3 / 1) = 90px;
　　- 項(xiàng)目3: 300px * (0.4 / 1) = 120px;

 <!-- demo-4 -->

  <div class="parent">
    <div class="child1">50px + 60px</div>
    <div class="child2">100px + 90px</div>
    <div class="child3">150px + 120px</div>
  </div>

  <style>
    .parent {
      width: 600px;
      display: flex;
      text-align: center;
      color: #eee;
    }

    .child1 {
      flex-basis: 50px;
      flex-grow: 0.2;
      background-color: #0066CC;
    } 

    .child2 {
      flex-basis: 100px;
      flex-grow: 0.3;
      background-color: #009900;
    }

    .child3 {
      flex-basis: 150px;
      flex-grow: 0.4;
      background-color: #CC3300;
    }

flex-shrink

　　flex-shrink 設(shè)置當(dāng) flex 容器空間不足時(shí)項(xiàng)目的放大比例，它的默認(rèn)值為 1 (空間不足時(shí)該項(xiàng)目將縮小)。

　　flex-shrink 的計(jì)算方式與 flex-grow 略有不同，有兩個(gè)因素影響 flex 項(xiàng)該縮小多少，一個(gè)是 flex-shrink 的屬性值，另一個(gè)是 flex 項(xiàng)本身的大小，它們按各自的權(quán)重進(jìn)行縮小，舉例來(lái)說(shuō)：

　　主軸長(zhǎng)度為600px, 項(xiàng)目1占據(jù)100px, 項(xiàng)目2占據(jù)300px, 項(xiàng)目3占據(jù)500px, 每個(gè)項(xiàng)目的 flex-shrink 屬性值分別為1,3,2, 則總權(quán)重為 100px 1 + 300px 3 + 500px *2 = 2000px, 每個(gè)項(xiàng)目的權(quán)重分別為為：
　　- 項(xiàng)目1: (100px * 1) / 2000px = 0.05;
　　- 項(xiàng)目2: (300px * 3) / 2000px = 0.45;
　　- 項(xiàng)目3: (500px * 2) / 2000px = 0.50;
　　溢出的空間長(zhǎng)度為：100px + 300px + 500px - 600px = 300px;
　　那么每個(gè)項(xiàng)目分別縮小：
　　- 項(xiàng)目1: 300px * 0.05 = 15px;
　　- 項(xiàng)目2: 300px * 0.45 = 135px;
　　- 項(xiàng)目3: 300px * 0.50 = 150px;

 <!-- demo-5 -->

  <div class="parent">
    <div class="child1">100px - 15px</div>
    <div class="child2">300px - 135px</div>
    <div class="child3">500px - 150px</div>
  </div>
  <style>
    .parent {
      width: 600px;
      display: flex;
      text-align: center;
      color: #eee;
    }

    .child1 {
      flex-basis: 100px;
      flex-shrink: 1;
      background-color: #0066CC;
    } 

    .child2 {
      flex-basis: 300px;
      flex-shrink: 3;
      background-color: #009900;
    }

    .child3 {
      flex-basis: 500px;
      flex-shrink: 2;
      background-color: #CC3300;
    }
  </style>

　　同樣的，當(dāng) flex-shrink 的值為小數(shù)時(shí)，也分兩種情況：
　　1. 所有flex項(xiàng)的 flex-shrink 屬性值之和大于1，仍然按照上述方式進(jìn)行計(jì)算；
　　2. 所有flex項(xiàng)的 flex-shrink 屬性值之和小于1，只收縮溢出空間的一部分，例如項(xiàng)目1為 0.1, 項(xiàng)目2為 0.3, 項(xiàng)目3為 0.2, 則總的收縮空間為：
　　300px * (0.1 + 0.3 + 0.2) = 180px　　
　　每個(gè)項(xiàng)的權(quán)重計(jì)算方式是不變的，每個(gè)項(xiàng)目分別縮小：
　　- 項(xiàng)目1: 180px * 0.05 = 9px;
　　- 項(xiàng)目2: 180px * 0.45 = 81px;
　　- 項(xiàng)目3: 180px * 0.50 = 90px;

 <!-- demo-6 -->

  <div class="parent">
    <div class="child1">100px - 9px</div>
    <div class="child2">300px - 135px</div>
    <div class="child3">500px - 90px</div>
  </div>

    <style>
    .parent {
      width: 600px;
      display: flex;
      text-align: center;
      color: #eee;
    }

    .child1 {
      flex-basis: 100px;
      flex-shrink: 0.1;
      background-color: #0066CC;
    } 

    .child2 {
      flex-basis: 300px;
      flex-shrink: 0.3;
      background-color: #009900;
    }

    .child3 {
      flex-basis: 500px;
      flex-shrink: 0.2;
      background-color: #CC3300;
    }
  </style>

　　由于只收縮了溢出空間的一部分，div 內(nèi)的元素總寬度實(shí)際上是超出 div 的寬度的。

　　以上就是關(guān)于使用flex布局中 flex-grow 與 flex-shrink 計(jì)算方式的簡(jiǎn)單介紹。

上述內(nèi)容就是怎么在flex布局中計(jì)算flex-grow與flex-shrink，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。