[css] 搞懂 flex-grow, flex-shirk 及 flex-basis 三種屬性

在 CSS3 支援  flexbox 排版以後,相信許多人已經使用了 flexbox,還沒使用過的可以去玩 Flexbox Froggy 學習一下 XD

最近使用 flexbox 製作 RWD 網站時,順便弄清楚了 flex-basis, flex-grow , flex-shrink

在這邊紀錄一下

flex-basis

決定 flexbox 排版的 item 的初始寬/高(取決於 flex-direction 的方向).

  • auto
    預設值,根據 item 的內容決定寬/高
  • <width/height>
    指定特定的寬/高,可以是數值也可以是比例.

Q: flex-basiswidth/height 有什麼不一樣?

A:

flex-direction: row 時,flex-basis 會決定了 width.

flex-direction: column 時,flex-basis 會決定了 height.

備註: position: absolute 的 elment 因為不會是 flexbox 排版因此無法透過 flex-basis 設定 width/height.

flex-grow

決定 flexbox 排版的 item 如何分配剩餘的空間.

舉個例子,以往如果要做單/雙側欄排版時,我們必須使用百分比或 calc 來達成,現在使用 flexbox + flex-grow 就可以輕易地達成!

有個特別的地方是當 flex-grow 介於 0-1 時,剩餘空間將不會被分配完.

 Flex values between 0 and 1 have a somewhat special behavior: when the sum of the flex values on the line is less than 1, they will take up less than 100% of the free space.

簡單來說,在 flexbox 排版底下的所有 item 預設的 flex-grow 會是 0,若有剩餘空間,則會以如下算法去分配空間:

(每個 item 的 flex-grow / 全部 item 的 flex-grow 總和) x 剩餘空間

ps. 全部 item 的 flex-grow 總和最小為 1

舉個例子:

flex-shrink

當空間有限時,決定如何分配縮小的比例在每個 item,預設值為 1

計算方法也與 flex-grow  相當接近

(每個 item 的 flex-shrink / 全部 item 的 flex-shrink 總和) x (item 寬/高)

ps. 全部 item 的 flex-grow 總和最小為 1

來個例子(在 jsfiddle 拖拉會比較有感):

最後,補充一下使用  flexbox 排版需要注意的小細節

依照 w3c spec 有特別註記 flexbox 裡面的 item 預設會是 min-width: auto/min-height: auto ,並且會是  overflow: visible

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to 0.

常見的問題可能是在實作上方的雙側欄或是僅帶有 header/footer 的單頁式網站(100vh/100vw)

會發現 flexbox item 就算宣告 flex-shrink仍然會因為 item 內容而無法進而縮放.

這時可以試著將 flexbox item  加上以下屬性

min-width: 0;
min-height:0;
overflow: hidden;

就可以正常縮小 item 了 🎉

參考資料:

https://cythilya.github.io/2017/04/06/flexbox-advance/

https://www.w3.org/TR/css-flexbox-1/

https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size

Leave a Reply