三個flex屬性對元素的影響是什么

本篇內(nèi)容主要講解“三個flex屬性對元素的影響是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“三個flex屬性對元素的影響是什么”吧!

首先我們需要了解，flex 是三個屬性 flex-grow 、flex-shrink 、flex-basis的簡寫，可以使用一個、兩個、或者三個值指定 flex 屬性。具體語法可以參考MDN-flex

接下來我們逐一拆解這三個屬性對元素的影響

flex-basis

flex-basis 定義了空間分配發(fā)生之前初始化 flex 子元素的尺寸，屬性默認值 auto； flex 子元素未伸張和收縮之前，它的大小是多少。

如果 flex-basis 設置為 auto , 瀏覽器會先檢查 flex 子元素的主尺寸是否設置了 flex 子元素的初始值。

比如說你已經(jīng)給你的 flex 子元素設置了 150px 的寬，則 150px 就是這個 flex 子元素的 flex-basis；如果沒有設置，則 auto 會解析為其內(nèi)容的大小。這個例子中，給第一個元素設置寬度150px，第二、三個元素不設置寬度。

:first-child {
  width: 150px;
}

效果如下：

如果你想 flexbox 完全忽略 flex 子元素的尺寸就設置 flex-basis 為 0。這樣就算元素一設置了寬度，它最終的寬度也是內(nèi)容寬度。

正負自由空間

在介紹剩下兩個屬性前先看兩個概念 positive free space 正向自由空間和 negative free space反向自由空間:

• 正向自由空間

  比如說，現(xiàn)在有 500px 寬的 flex 容器，flex-direction 屬性值為 row, 三個 100px 寬的 flex 子元素， 那么沒有被填充的 200px 的 就是正向自由空間(positive free space)。

• 反向自由空間

  當子元素的寬度總和大于容器寬度時，溢出的尺寸100px就是反向自由空間。

那么用什么屬性分配正負自由空間呢？

flex-grow

• flex-grow 默認值 0，若被賦值為一個正整數(shù)， flex 元素會以 flex-basis 為基礎，沿主軸方向增長尺寸，并占據(jù)可用空間。flex-grow 按比例分配增長空間。

初始狀態(tài)：我們給三個元素都設定寬度，并且總和不大于主軸寬度

.flex-grow-father {
  width: 500px;
  div:nth-child(1) {
    width: 50px;
  }
  div:nth-child(2) {
    width: 100px;
  }
  div:nth-child(3) {
    width: 150px;
  }
}

增加的寬度計算方法：假設元素的 flex-grow 值為 x，正向自由空間寬度為l，則每個元素增加的寬度=$\frac{x}{x\text{的總和}}?l$，元素最終寬度 = $\text{元素初始寬度}+\text{增加的寬度}$；

• 相同比例增長：當給每個子元素的都設定相同的 flex-grow 值，每個元素就會增長相同的寬度

• 
  

.with-same-flex-grow {
  * {
    flex-grow: 1;
  }
}

效果如下：

本例中第一個元素寬度的計算 $\frac{1}{1+1+1}?200+50=116.67px$；

第二個元素寬度寬度計算 $\frac{1}{1+1+1}?200+100=166.67px$；

第三個同理為$216.67px$

• 不同比例增長：給每個子元素的都設定不同的 flex-grow 值

.with-different-flex-grow {
  div:nth-child(1) {
    flex-grow: 2;
  }
  div:nth-child(2) {
    flex-grow: 1;
  }
  div:nth-child(3) {
    flex-grow: 1;
  }
}

效果如下：

本例中第一個元素寬度的計算$\frac{2}{2+1+1}?200+50=150px$；

第二個元素寬度的計算$\frac{1}{2+1+1}?200+100=150px$；

第三個同理是$200px$

• 如果想讓開始時尺寸不同的元素內(nèi)容寬度相等（平分容器寬度），可以將 flex-basis 設置為 0（完全忽略 flex 子元素的尺寸） flex-grow 為 1（等比例分配）

.average {
  * {
    /* flex: 1 1 0; */
    flex-basis: 0;
    flex-grow: 1;
  }
}

效果如下：

flex-shrink

flex-shrink 屬性指定了 flex 元素的縮小值,默認值為 1； 它確定在分配 negative free space 時，flex 子元素相對于 flex 容器中其余 flex 子元素收縮的程度。默認值 1。用于減少盒子空間使盒子適應容器而不溢出(為了避免 border 干擾去掉邊框)

我們給三個元素都設定寬度，并且總和大于主軸寬度；這里我們將元素的flex-shrink值設置為 0 (元素寬度不變，不需要吸收溢出的寬度)，目的是觀察一下反向自由空間。

.flex-shrink-wrapper {
  display: flex;
  div:nth-child(1) {
    width: 100px;
    background: gold;
  }
  div:nth-child(2) {
    width: 200px;
    background: tan;
  }
  div:nth-child(3) {
    width: 300px;
    background: gold;
  }
}
.zero {
  * {
    flex-shrink: 0;
  }
}

吸收的寬度計算：假設每個 flex-shrink 的值為 $x_n$，元素的初始寬度為 $l_n$，反向自由空間為$L$那么每個元素吸收的寬度為: $\frac{x_n?l_n}{x_1?l_1+\mathrm{.}\mathrm{.}\mathrm{.}+x_n?l_n}?L$

• 給子元素相同的 flex-shrink 值，這里以默認值 1 為例

.with-same-flex-shrink {
  * {
    flex-shrink: 1;
  }
}

這時第一個元素的吸收寬度為：$\frac{1?100}{1?100+1?200+1?300}?100=16.67px$，最終元素寬度為 $100?16.67=83.37px$

這時第一個元素的吸收寬度為：$\frac{1?200}{1?100+1?200+1?300}?100=33.33px$，最終元素寬度為 $200?33.33=166.67px$

這時第一個元素的吸收寬度為：$\frac{1?300}{1?100+1?200+1?300}?100=50px$，最終元素寬度為 $300?50=250px$

• 給子元素不同的 flex-shrink 值

.with-different-flex-shrink {
  div:nth-child(1) {
    flex-shrink: 1;
  }
  div:nth-child(2) {
    flex-shrink: 2;
  }
  div:nth-child(3) {
    flex-shrink: 0;
  }
}

這時第一個元素的吸收寬度為: $\frac{1?100}{1?100+2?200}?100=20px$，最終元素寬度為 $100?20=80px$

這時第二個元素的吸收寬度為：$\frac{2?200}{1?100+2?200}?100=80px$，最終元素寬度為 $200?80=120px$

這時第三個元素的 flex-shrink 值為 0，不吸收寬度，最終元素寬度即為元素本身的寬度 $300px$

flex 的簡寫值

一般我們很少見上述屬性單獨使用，都是用flex這一個簡寫屬性來表述元素的伸縮。

Flex 簡寫形式允許你把三個數(shù)值按這個順序書寫 flex-grow，flex-shrink，flex-basis。以下是常見的幾種取值：

• flex: initial 的擴展為 0 1 auto (不可放大、可縮小、大小與容器元素大小一致)

• flex: auto 的擴展為 1 1 auto (可放大、可縮小、大小與容器元素大小一致)

• flex: none 的擴展為 0 0 auto (不可放大、不可縮小、大小與容器元素大小一致)

• flex: <positive-number>的擴展為 <positive-number> 1 0

flex: <positive-number>的應用：

兩欄布局

.two-grid-wrapper {
  display: flex;
  margin-top: 20px;
  height: 200px;
  .left {
    width: 200px;
    background-color: gold;
  }
  .right {
    flex: 1;
    background-color: tan;
  }
}

效果如下：左側(cè)寬度不變，右側(cè)自適應

三欄布局

.three-grid-wrapper {
  display: flex;
  margin-top: 20px;
  height: 200px;
  .left {
    width: 200px;
    background-color: gold;
  }
  .right {
    width: 200px;
    background-color: gold;
  }
  .center {
    flex: 1;
    background-color: tan;
  }
}

效果如下：左右寬度不變，中間自適應

PS.flex 子元素沒有 positive free space 就不會增長；沒有 negative free space 就不會縮小。

到此，相信大家對“三個flex屬性對元素的影響是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！