Day5 | 淺談 Flex 排版內層屬性

上篇「 淺談 Flex 排版外層屬性 」說到 flex 的外層屬性們,這篇來說說 flex 的內層屬性。
左方為外層屬性,右方為內層屬性。  圖片出處 : 六角學院 ▲

❒ Flex 內層屬性

flex

flexflex-growflex-shrinkflex-basis 的縮寫。

1
flex: flex-grow flex-shrink flex-basis;

flex-grow 伸展比

子元素依比例伸展分配剩餘空間,在「 父元素空間充足時會有影響 」,預設為 0。

  • flex-grow: 0; 預設,不會將空間分配給子元素。
  • flex-grow: 1; 子元素會依比例進行伸展。
  • CodePen 範例

flex-shrink 收縮比

子元素的壓縮比例分配 , 在「 父完素空間不足時會有影響 」,預設為 1。

  • flex-shrink: 0; 不會被壓縮。
  • flex-shrink: 1; 預設,會被壓縮。
  • CodePen 範例

flex-basis 預設大小

子元素預設被分配到的空間,預設為 auto。
CodePen 範例

order 排序

可改變子元素的排列順序,整數或負數皆可,數字越小排序越前。
Codepen 範例

align-self 單一個物件的次軸對齊

可調整子元素在次軸的對齊位置 ( 向 align-items ),如果已在父層下 align-items,但要對子層其中一個子元素調整對齊位置,可在那個子元素下 align-self
CodePen 範例

屬性值:

  • auto | flex-start | flex-end | center | baseline | stretch

❒ Flex 運算

01. 父層寬度為 800px,子元素們寬度各為 300px,600px,100px,寬度依照比例來算會是多少呢 ?

依照比例來算 :

  • .box1 : 800 px * ( 300 px /1000 px ) = 240 px
  • .box2 : 800 px * ( 600 px /1000 px ) = 480 px
  • .box3 : 800 px * ( 100 px /1000 px ) = 80 px
    CodePen 範例

資料來源