iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
3

關於 Flex 空間分配上的三個重要屬性

如題,今天來說說與 Flex 空間分配密切相關的三個屬性 flex-grow / flex-shrink / flex-basis ,這三個屬性若配合 RWD,可達成彈性分配,依序來看看他們吧。

flex-grow

預設值爲 0。依照設定比例分配剩餘空間。有一個 html 架構如下:

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

container 寬度爲 1000px,每個 box 寬度爲 100px。粉色綠色藍色方塊皆爲 100px,剩餘區域爲 700px。

https://ithelp.ithome.com.tw/upload/images/20181108/20111959xolTXP0QN1.png

接著設定粉色盒子 flex-grow:1; ,表示剩餘空間 700px,分爲 1 份,皆分配給粉色盒子,則粉色盒子寬度爲 800px。效果如下:

https://ithelp.ithome.com.tw/upload/images/20181108/20111959LZ5LRW5zZX.png

接著將綠色盒子也設定 flex-grow:1; ,表示剩餘空間 700px,分爲 2 份,分配給粉色盒子及綠色盒子各一份,各分 350px,粉色盒子及綠色盒子寬度皆爲 450px。效果如下:

https://ithelp.ithome.com.tw/upload/images/20181108/20111959037GDzhqQV.png

若 container 寬度改爲比例,例如 100% ,隨著寬度縮放,剩餘空間不同,則被分配到的寬度也不一樣。

gifffff

flex-shrink

flex-shrink 是 flex-grow 的反向,有剩餘空間,就表示也有不夠空間的時候。flex-shrink 表示空間不夠時的壓縮比例。預設值爲 1。表示大家被壓縮的比例相同。

container 寬度維持 1000px,每個 box 寬度改爲 400px,總共 1200px,超出 container 寬度。則每個盒子因爲 flex-shrink 預設爲 1 的關係,不夠的空間分均分壓縮三個盒子。效果如下(爲了可視化 container,設置紅色框線):

https://ithelp.ithome.com.tw/upload/images/20181108/20111959vvv5Z6mXIO.png

接著試試看把盒子皆設定 flex-shrink 爲 0,不要有任何壓縮,則三個盒子會爆出 container ,這也是 flex 爲了預防爆版,預設值爲 1 的用意,效果如下:

https://ithelp.ithome.com.tw/upload/images/20181108/20111959QlaiCEcAjo.png

接著試試看粉色盒子 flex-shrink 爲 1,其他盒子爲 0,則不夠的部分只會壓縮粉色盒子,效果如下:

https://ithelp.ithome.com.tw/upload/images/20181108/20111959Bm1epLPUz0.png

壓縮盒子的分配並不像多餘空間是以設定的比例直接分配,而是還要考慮原來盒子的大小。因爲當盒子大小不同時,能夠承受被壓縮的程度不同。例如粉色盒子 300px,綠色盒子 400px,藍色盒子 500px,不夠空間總共爲 400px。flex-shrink 爲預設值 1。粉色盒子壓縮後爲 250px ;粉色盒子壓縮後爲 333px ;粉色盒子壓縮後爲 416px。

如下計算(可能有小數點差異):

總權重: 300*1+400*1+500*1=1200
粉色盒子壓縮: 200 *1(flex-shrink) *300(width) / 1200(總權重)= 50
綠色盒子壓縮: 200 *1(flex-shrink) *400(width) / 1200(總權重)= 67
藍色盒子壓縮: 200 *1(flex-shrink) *500(width) / 1200(總權重)= 83

flex-basis

flex-basis 預設值爲 auto,表示其預設分配到的空間,與 width 很像,但優先程度較高。

container 寬度維持 1000px,每個 box 寬度改爲 200px。將粉色盒子加上 flex-basis: 300px;,則 flex-basis 會覆蓋 width,效果如下:

https://ithelp.ithome.com.tw/upload/images/20181108/20111959RYIplc3j7m.png

以上三個值可縮寫在一起,順序爲flex-grow | flex-shrink | flex-basis 。

以上爲 Flex 空間分配的整理與理解:)

參考資料:

  1. 深入理解css3中的flex-grow、flex-shrink、flex-basis
  2. 详解 flex-grow 与 flex-shrink

上一篇
Day23 學習 scss 時的那些大小事
下一篇
Day25 不求當個 Git 大師,只求和平相處(分支篇)
系列文
前端之 " wow~原來是這樣啊 "30

1 則留言

0
Ho.Chun
iT邦新手 5 級 ‧ 2019-03-11 00:19:54

很清楚! /images/emoticon/emoticon41.gif

Lai iT邦新手 5 級 ‧ 2019-03-11 10:35:13 檢舉

謝謝 /images/emoticon/emoticon25.gif

我要留言

立即登入留言