一文詳解三個 flex 屬性對元素的影響

在開發的時候常用flex 這個屬性作用於彈性盒子的子元素，例如：flex:1或flex: 1 1 auto，那麼這個屬性到底控制了元素怎麼的行為呢？ flex:1又究竟是什麼意義呢？讓這篇文章帶你徹底了解 flex 屬性吧！ 【推薦學習：css影片教學】

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

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

flex-basis

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

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

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

:first-child {
  width: 150px;
}

效果如下：

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

正負自由空間

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

• #正向自由空間

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

• 反向自由空間

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

那麼用什麼屬性來指派正負自由空間呢？

flex-grow

• flex-grow 預設值0，若被賦值為正整數， flex 元素會以flex-basis 為基礎，沿著主軸方向增長尺寸，並佔據可用空間。 flex-grow 按比例分配成長空間。

初始狀態：我們給三個元素都設定寬度，且總和不大於主軸寬度

.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的总和}*l$，元素最终宽度 = $元素初始宽度 + 增加的宽度$；

• 相同比例增长：当给每个子元素的都设定相同的 flex-grow 值，每个元素就会增长相同的宽度

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

效果如下：

本例中第一個元素寬度的計算$\frac{\mathrm{\#1}}{\#\#1\mathrm{}\mathrm{\#1}\#\#1\mathrm{}}1\mathrm{\#\ast }200\mathrm{}\mathrm{50}=$x

#5######0######## ####=########################1######1######6####### .######6######7######p######x##############;###

第二个元素宽度宽度计算 $\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{\mathrm{\#2}}{\#\#2\mathrm{}1\mathrm{}1\mathrm{}}\#\ast 200\mathrm{}50\mathrm{}=150\mathrm{}px$0

### ###=########################1#######5######0#######p ######x###############；###

第二个元素宽度的计算$\frac{1}{2+1+1}*200 + 100 = 150px$；

第三个同理是$200px$

• 如果想让开始时尺寸不同的元素内容宽度相等（平分容器宽度），可以将 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$$$.######.######.###### #########x####### n#########∗#########l######n###############∗####### L#########\frac{x_n*l_n}{x_1*l_1 ... x_n*l_n}*L$

• 给子元素相同的 flex-shrink 值，这里以默认值 1 为例

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

這時第一個元素的吸收寬度為：$\frac{\mathrm{\#1}\#\#\ast 100\mathrm{}}{1\mathrm{}\ast \#100\mathrm{}\#1\mathrm{}\ast 200\mathrm{}1\mathrm{}\ast 300\mathrm{}}100\mathrm{=}16.67\mathrm{p}x\backslash frac\{1*100\}\; \{1*100\; 1*200\; 1*300\}*100\; =\; 16.67px$0=$##x$=

######################8#####3### ###.######3######7######p######x##################

這時第一個元素的吸收寬度為：$\frac{\mathrm{\#1}\#\#\ast 200\mathrm{}}{1\mathrm{}\ast \#100\mathrm{}\#1\mathrm{}\ast 200\mathrm{}1\mathrm{}\ast 300\mathrm{}}100\mathrm{=}33.33\mathrm{p}x\backslash frac\{1*200\}\; \{1*100\; 1*200\; 1*300\}*100\; =\; 33.33px$#10$3$p #3

######=########################1#####6#### ###6######.######6######7######p#####x################################### ######

这时第一个元素的吸收宽度为：$\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{\mathrm{\#1}\ast 100}{1\ast \mathrm{\#100}\mathrm{\#2}\ast 200}\ast \mathrm{\#100}\#=20\#\#\; px$#20##p$=$p8#0

###p#####x###### #############

這時第二個元素的吸收寬度為：$\frac{\mathrm{\#2}\ast 200}{1\ast \mathrm{\#100}\mathrm{\#2}\ast 200}\ast \mathrm{\#100}\#=80\#\#\; px$#8##0##p#x$\mathrm{}，最終元素寬度為\mathrm{}200-\mathrm{80}$#p##0##p

#x

$這時第三個元素的flex-shrink\; 值為0，不吸收寬度，最終元素寬度即為元素本身的寬度\mathrm{}$xp

# x##################

flex 的简写值

一般我们很少见上述属性单独使用，都是用flex这一个简写属性来表述元素的伸缩。

Flex 简写形式允许你把三个数值按这个顺序书写 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>的扩展为 <positive-number> 1 0</positive-number>

flex: <positive-number></positive-number>的应用：

两栏布局

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

效果如下：左侧宽度不变，右侧自适应

三栏布局

.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布局很不熟悉，基本概念都说不上来，只会无脑用，于是去学习，然后就诞生了这篇文章。欢迎指正。

（学习视频分享：web前端）

以上是一文詳解三個 flex 屬性對元素的影響的詳細內容。更多資訊請關注PHP中文網其他相關文章！