flex-grow 與 flex-shrink

flex-grow

flex-grow用於處理flex容器剩餘空間。

剩餘空間分配計算

剩餘空間 = flex容器寬度 - (項目1flex-basis + 項目2flex-basis + ... + 項目nflex-basis)

項目1分配空間 = [項目1flex-grow / (項目1flex-grow + 項目2flex-grow + ... + 項目nflex-grow)] * 剩餘空間

示例

• 原始案例（剩餘300px）

<div class="row">

  <div class="col"></div>
  <div class="col"></div>

</div>

.row {
  display: flex;
  width: 600px;
  height: 100px;
}

.row > .col:nth-child(1) {
  background: red;
  flex-basis: 100px;
  flex-grow: 0;
}
.row > .col:nth-child(2) {
  background-color: green;
  flex-basis: 200px;
  flex-grow: 0;
}

• 剩餘空間分配

<div class="row">

  <div class="col"></div>
  <div class="col"></div>

</div>

.row {
  display: flex;
  width: 600px;
  height: 100px;
}

.row > .col:nth-child(1) {
  background: red;
  flex-basis: 100px;
  flex-grow: 2;
}
.row > .col:nth-child(2) {
  background-color: green;
  flex-basis: 200px;
  flex-grow: 1;
}

• 項目1：

  • 原寬度：100px
  • 新寬度：300px
  • 分配空間：200px

• 項目2：

  • 原寬度：200px
  • 新寬度：300px
  • 壓縮寬度：100px

flex-shrink

flex-shrink用於處理flex容器溢出空間。

溢出空間分配計算

溢出空間 = (項目1flex-basis + 項目2flex-basis + ... + 項目nflex-basis) - flex容器寬度

加權值 = (項目1flex-basis 項目1flex-shrink) + (項目2flex-basis 項目2flex-shrink) + (...) + (項目nflex-basis * 項目nflex-shrink)

項目1壓縮寬度 = (項目1flex-basis 項目1flex-shrink / 加權值) 溢出空間

示例

• 原始項目（溢出300px）

<div class="row">

  <div class="col"></div>
  <div class="col"></div>

</div>

.row {
  display: flex;
  width: 300px;
  height: 100px;
}

.row > .col:nth-child(1) {
  background: red;
  flex-basis: 200px;
  flex-shrink: 0;
}
.row > .col:nth-child(2) {
  background-color: green;
  flex-basis: 400px;
  flex-shrink: 0;
}

• 溢出處理

<div class="row">

  <div class="col"></div>
  <div class="col"></div>

</div>

.row {
  display: flex;
  width: 300px;
  height: 100px;
}

.row > .col:nth-child(1) {
  background: red;
  flex-basis: 200px;
  flex-shrink: 1;
}
.row > .col:nth-child(2) {
  background-color: green;
  flex-basis: 400px;
  flex-shrink: 2;
}

• 項目1：

  • 原寬度：200px
  • 新寬度：140px
  • 壓縮寬度：60px

• 項目2：

  • 原寬度：400px
  • 新寬度：160px
  • 壓縮寬度：240px

參考資源

css3 flex屬性flex-grow、flex-shrink、flex-basis學習筆記