A-Ming-Design

Flex 寬度分配

2019 年 11 月 26 日

現在也許多人都用Flex做排版,多數人Flex都是在談論align-items 、 justify-content,今天我們就來談談Flex-grow吧!
Flex 寬度分配大致上分為三類「flex-basis預設寬」、「flex-grow伸展」、「flex-shrink壓縮」。

flex-basis預設寬 以上圖為例,黑色區塊的寬度為960px,並分別放入寬度各為 300 的橙色、青色方框(flex-basis: 300px),其實 flex-basis 與 width 很像,不過它的優先程度較高。

flex-grow撰寫方式

由上下兩張圖,我們能發現
當我們把橙色的 box 設定 flex-grow 為 1 時,伸展 90px。
當我們把青色的 box 設定 flex-grow 為 3 時,伸展 270px。

flex-grow示意圖

那它又到底是如何算出來的呢?就是用一個很難記的公式算出來的【剩餘寬度*單一區塊的 grow /所有區塊的 grow】

聽不懂對吧!那我們就開始來算數學。
一開始我們將黑色區塊的寬度為 960px,並在裡面放了兩個寬度各為 300px 的橙色及青色方框,

套用公式「剩餘寬度*單一區塊的 grow /所有區塊的 grow」
剩餘區塊:960-(300*2)=360
橙色伸展:360*1/4=90
青色伸展:360*3/4=270

文章分類

  • RWD
  • CSS
  • 其它