flex-grow詳解

一、flexgrow失效

1、該元素未設置display: flex或display: inline-flex

<div style="flex-grow: 1; background-color: red; width: 100px; height: 100px; margin-right: 10px;"></div>

2、該元素處於父元素的flex-basis或者width設置為0的情況下

<div style="display: flex; width: 300px;">
  <div style="background-color: red; flex-grow: 1; flex-basis: 100px;"></div>
  <div style="background-color: blue; flex-grow: 1; flex-basis: 200px;"></div>
</div>

3、該元素的flex-basis值為auto且它的width為auto

<div style="display: flex;">
  <div style="background-color: red; flex-grow: 1;"></div>
  <div style="background-color: blue; flex-grow: 1; width: auto;"></div>
</div>

二、flexgrow作用

flex-grow屬性定義了元素在flex容器中的拉伸比例，默認值是0，它指定一個數字，確定在決定了元素要分配多少多餘空間後，剩餘空間應該如何分配。例如，如果所有 flex項都設置為“1”，它們將等分其中的用於多餘空間的空間塊。

<div style="display: flex;">
  <div style="background-color: red; flex-grow: 1;"></div>
  <div style="background-color: blue; flex-grow: 2;"></div>
</div>

上面代碼將把其中的用於多餘空間的空間塊分成1份和2份

三、flexgrow屬性解

“flex-grow”被定義為元素在彈性容器內拉伸/收縮的比率，默認值為0。它指定了元素在分配剩餘空間時要考慮的因素。如果所有彈性項都有0（默認），彈性容器不會為該項目增加額外的空間。如果一個彈性項的值為1，其他項沒有指定的情況下，那麼他們將分享彈性容器中的所有剩餘空間。

<div style="display: flex;">
  <div style="background-color: red; flex-grow: 1;"></div>
  <div style="background-color: blue; flex-grow: 2;"></div>
</div>

四、flex-flow

flex-flow是一個組合屬性，用於同時設置flex-direction屬性和flex-wrap屬性。

<div style="display: flex; flex-flow: column nowrap;">
  <div style="background-color: red; height: 100px;"></div>
  <div style="background-color: blue; height: 100px;"></div>
  <div style="background-color: green; height: 100px;"></div>
</div>

五、flex-shrink

flex-shrink屬性指定彈性項目的縮小比例，默認值為1，當彈性容器空間不足時，該屬性指定彈性項目的縮小比例。例如，如果所有的 flex項都設置為 “1”則它們將平等地收縮。

<div style="display: flex;">
  <div style="background-color: red; flex-shrink: 1;"></div>
  <div style="background-color: blue; flex-shrink: 2;"></div>
</div>