深刻理解Flex屬性

做者： Yeaseon
Blog：yeaseonzhang.github.io
原文連接

Flex 是 Flexible Box的縮寫，意爲「彈性佈局」，能夠簡便、完整、響應式地實現各類頁面佈局。

Flex的出現就是爲了解決傳統佈局的display屬性 + position屬性 + float屬性的複雜性。

瀏覽器對於Flex的支持性

能夠看到瀏覽器對於Flex佈局的支持性已經很好了，因此咱們能夠放心大膽的用在咱們項目中。

flex 屬性

flex: flex-grow | flex-shrink | flex-basis

flex屬性包含三個值：flex-grow、flex-shrink和flex-basis

• flex-grow: 擴展比例
• flex-shrink: 收縮比例
• flex-basis: 伸縮基準值

首先咱們簡單寫一個flex佈局的Demo

HTML

<div class="parent">
  <div class="child_1"></div>
  <div class="child_2"></div>
  <div class="child_3"></div>
</div>複製代碼

CSS

.child_1,
.child_2,
.child_3 {
  flex: 1;
  height: 200px;
}

.child_1 {
  background-color: rgba(255, 0, 0, .5);
}

.child_2 {
  background-color: rgba(0, 255, 0, .5);
}

.child_3 {
  background-color: rgba(0, 0, 255, .5);
}複製代碼

See the Pen Flex-1 by YeaseonZhang (@YeaseonZhang) on CodePen.

設置父元素display: flex，其子元素就能使用flex佈局，咱們只是簡單的爲子元素使用了flex: 1就實現了三等分，並且會隨着父元素的寬度變化而變化。這就是咱們平時flex佈局的簡單用法，即各個子元素按照比例佈局。

flex: 1實際上是flex: 1 1 0%的簡寫屬性，即伸縮比例都是1。下面咱們就分別理解下三個屬性值對於佈局的影響。

flex-basis 屬性

flex-basis屬性是伸縮的基準值，這個屬性也是咱們計算最終寬度的決定性因素。

經過子元素flex-basis屬性和與父元素(容器)寬度值進行比較，會出現兩種狀況(忽略相等的狀況)：

• 子元素flex-basis屬性和 < 父元素寬度
• 子元素flex-basis屬性和 > 父元素寬度

上面的兩種狀況就分別對應了flex-grow和flex-shrink屬性生效的狀況，也就是說當子元素的flex-basis屬性寬度和小於父元素的寬度值時flex-grow生效，反之flex-shrink生效。

flex-grow 屬性

flex-grow屬性是擴展比例，上面咱們也談到了當子元素的flex-basis總和小於父元素的寬度值時flex-grow生效。

如今咱們就來改變CSS，知足這個前提條件。

CSS

.parent {
  display: flex;
  width: 600px;
}

.child_1,
.child_2,
.child_3 {
  height: 200px;
}

.child_1 {
  flex: 1 0 150px;
  background-color: rgba(255, 0, 0, .5);
}

.child_2 {
  flex: 0 0 100px;
  background-color: rgba(0, 255, 0, .5);
}

.child_3 {
  flex: 1 0 150px;
  background-color: rgba(0, 0, 255, .5);
}複製代碼

See the Pen Flex-2 by YeaseonZhang (@YeaseonZhang) on CodePen.

此時，各個元素的flex-basis和爲(150 + 100 + 150) = 400px, 小於父元素的600px,咱們就來分別計算每一個子元素的寬度值。

可用空間 = 父元素width - 子元素flex-basis總和 => 600 - (150 + 100 + 150) = 200

單位擴展空間 = 可用空間/子元素flex-grow總和 => 200/(1 + 0 + 1) = 100複製代碼

子元素的計算公式爲width = flex-basis + flex-grow * 單位擴展空間

因此child_1寬度爲(150 + 1 * 100) = 250px, child_2寬度爲(100 + 0 * 100) = 100px, child_3 同 child_1。

flex-shrink 屬性

flex-shrink 屬性是收縮比例，當子元素的flex-basis總和大於父元素的寬度值時flex-grow生效。

如今咱們就修改CSS知足這個前提。

CSS

.parent {
  display: flex;
  width: 600px;
}

.child_1,
.child_2,
.child_3 {
  /*flex: 1;*/
  height: 200px;
}

.child_1 {
  flex: 0 1 400px;
  background-color: rgba(255, 0, 0, .5);
}

.child_2 {
  flex: 0 1 200px;
  background-color: rgba(0, 255, 0, .5);
}

.child_3 {
  flex: 0 2 400px;
  background-color: rgba(0, 0, 255, .5);
}複製代碼

See the Pen Flex-3 by YeaseonZhang (@YeaseonZhang) on CodePen.

固然啦，咱們能夠按照flex-grow的計算方法套用。

溢出空間 = 父元素width - 子元素flex-basis總和 => 600 - (400 + 200 + 400) = -400

單位收縮空間 = 溢出空間/子元素flex-shrink總和 => -400/(1 + 2 + 2) = -100複製代碼

子元素的計算公式爲width = flex-basis + flex-shrink * 單位收縮空間

因此child_1寬度爲(400 + 1 * (-100)) = 300px, child_2寬度爲(200 + 1 * (-100)) = 100px, child_3 同 (400 + 2 * (-100)) = 200px。

大功告成了？其實並無實例狀況並非咱們計算的那樣300px 100px 200px，而是285.72px 142.86px 171.42px。

經過Google，發現了一種收縮因數的計算方法：

理想空間 = 子元素(flex-basis * flex-shrink)之和 => 400 * 1 + 200 * 1 + 400 * 2 = 1400

溢出空間 = 父元素width - 子元素flex-basis總和 => 600 - (400 + 200 + 400) = -400

收縮因數 = (flex-basis * flex-shrink) / 理想空間 => 400 / 1400 = 0.286; 200 / 1400 = 0.143; 800 / 1400 = 0.571複製代碼

分別爲每一個子元素計算了收縮因數就能計算咱們子元素的實際寬度，子元素的計算公式width = flex-basis + 收縮因數 * 溢出空間

因此child_1寬度爲400 + 0.286 * (-400) = 285.6, child_2寬度爲200 + 0.143 * (-400) = 142.8, child_3寬度爲400 + 0.571 * (-400) = 171.6

如今咱們計算出的值與瀏覽器渲染出的值基本上是相同的，咱們對於flex屬性的瞭解已經再也不是單單的比例計算了，但願本文對你有所幫助。