談一談flex佈局使用中碰到的一些問題

時間 2019-12-05

標籤 flex 佈局使用碰到一些問題欄目 Flex 简体版

原文原文鏈接

原由

工做之後因爲大量使用到了flex佈局而碰到了一些尚不清楚的問題，以及一些有意思的特性，在此寫篇博客記錄一下。css

flex三個值的含義

衆所周知，flex佈局全部的屬性有兩種：一種做用在彈性容器（Flex container）上，一種做用在彈性項目（Flex item）上，而flex就是做用在彈性項目上的屬性。html

flex 是 flex-grow、flex-shrink、flex-basis 三個值的簡寫，這個值規定了彈性項目如何伸長或壓縮以適應彈性容器中的可用空間。前端

flex-grow 定義彈性項目的放大比列，能夠接受數字（小數也能夠），不接受負值，默認值是 0 。這個值若是爲 0 就意味着即便容器內還存在剩餘空間，彈性項目也不會放大。segmentfault

flex-shrink 定義彈性項目的收縮比例，一樣接受數字（小數也能夠），不接受負值，默認值是 1 。若是一個彈性項目的 flex-shrink 設爲 0 而其餘彈性項目的 flex-shrink 值爲 1 ，則當彈性容器空間不足時，該彈性項目不會被壓縮，而其餘的彈性項目會被等比例壓縮。佈局

flex-basis 定義在分配容器內空間以前，彈性項目佔據的主軸空間（不必定是寬度，由於主軸方向能夠是縱向的），默認值是 auto 。若是對彈性項目同時設置 flex-basis 和 width ， width 會被忽略。還要注意當主軸是橫向的時候，若是設定了 max-width 或 min-width 會限制彈性項目的寬度。flex

這裏講一下 flex-basis 取值的狀況：code

指定的數值，好比以px、em爲單位的數值。
百分數，取百分數的話就是相對其父彈性容器的寬或高（取決於主軸方向）來計算，若是包含塊的尺寸未指定（也就是說父元素的尺寸取決於子元素），那麼這時候結果和 auto 同樣。
auto 值的意思是基於彈性項目的 width 或 height 調整大小（根據主軸的橫向或者縱向），若是沒有設置 width 或 height 則根據內容自適應。

設置flex以後的彈性項目如何計算寬度

這裏給一個代碼的例子htm

<div id="content">
  <div class="box1" style="background-color:red;">A</div>
  <div class="box2" style="background-color:lightblue;">B</div>
  <div class="box3" style="background-color:yellow;">C</div>
</div>

#content {
  display: flex;
  width: 360px;
}

.box1 {
  width: 100px;
  flex: 1 1 0;
}

.box2 {
  width: 100px;
  flex: 1 1 0;
}

.box3 {
  width: 100px;
  flex: 1 1 0;
}

因爲flex-basis的值爲 0 ，因此此時彈性容器的剩餘空間爲 360px - 0 * 3 = 360px ，因爲3個元素都設置了 flex-grow: 1 ，因此剩餘空間3個元素所佔比例爲 1:1:1 ，每一個元素的寬度就是 360px / 3 = 120px 。get

若是把代碼改一下呢？博客

#content {
  display: flex;
  width: 360px;
}

.box1 {
  width: 100px;
  flex: 1 1 0;
}

.box2 {
  width: 100px;
  flex: 1 1 auto;
}

.box3 {
  flex: 1 1 200px;
}

此時，彈性容器內剩餘寬度爲：360px - 0 - 100px - 200px = 60px，3個元素所佔剩餘空間比例一樣是 1:1:1 。那麼寬度分別就是：0 + 20px = 20px ，100px + 20px = 120px ，200px + 20px = 220px 。

對應複雜狀況的計算，這裏有一個回答寫得不錯：

flex設置成1和auto有什麼區別