EchoCarrie 已發佈 2019-11-5

淺談 Flex

Flex

當裡面子元素太小時,可以去做伸的動作填滿父層;反之子元素太大也可以去做收縮去填滿父層。

  • 啟用方式:直接在父層上面設定 display:flex;
  • flex 都是設定在父層上,針對裡面的內容物做設定,先讓子物件變 flex 的子物件,即可做換行或間距的編排。
  • Flex 與 Float 差異在於不用做清除浮動,父層還是抓的到子層的高度。

不要談 XY軸,談資料流向

  • 資料流走直向主軸就是直,資料流走橫向主軸就是橫的。
  • 資料流向 = 主軸;交叉軸 = 次軸。
  • 先判斷主軸方向再進行主軸與次軸設定。
  • 以下方圖示為例,資料流向 ( 主軸 ) 橫向,交叉軸 ( 次軸 ) 就會是直向。如果資料流向為直向,交叉軸就會變橫向。
  • 主軸預設為橫向 ( row ) 。

images

Flex 屬性值

  • 先判斷主軸( 資料流 ) 方向再進行主軸( 資料流 ) 與次軸( 交叉軸 ) 設定。
  • align 開頭屬性就為次軸設定,不是 align 開頭的屬性的都是針對主軸做設定。

關於 Flex 的屬性值們

  1. flex-direction 直排橫排隨你控制

    • row 橫排-左至右排列。
    • column 直排-上至下排列。
    • row-reverse 橫排-左至右排列的反向。
    • colume-reverse 直排-上至下排列的反向。
  2. flex-wrap 換行 範例

    • nowrap 不換行。
    • wrap 換行。
    • wrap-reverse 依主軸決定直或橫的反向換行。
  3. justify-content 資料流的對齊

    • flex-start 對齊主軸起點。
    • flex-end 對齊主軸終點。
    • center 對齊主軸水平線。
    • space-around 分散對齊水平線 ( 可參考下方圖示差異 )。
    • space-between 分散對齊水平線 ( 可參考下方圖示差異 )。
  4. align-items 交叉軸的對齊 : 針對僅單行子物件。範例
    align-content 交叉軸的對齊 : 針對具多行子物件。
    align-self 交叉軸的對齊 : 針對眾元素中單一元素。範例

    • flex-start 對齊次軸起點。
    • flex-end 對齊次軸終點。
    • center 對齊次軸中間。
    • stretch 延伸 100% 次軸。 範例
      • 假設主軸如果是直向,次軸則延伸 100% 寬。
      • 有設定固定寬高的子元素,在設定 stretch 時記得看主軸去判斷拿掉高度或寬度。
  5. order 改變子元素排列順序 範例

    • 預設 0 。
    • 整數或負數皆可。
  6. flex-grow 內容物寬度不足無法填滿父元素時,依比例分配填滿剩餘空間 範例

    • 預設 0 。
    • 次軸依比例分配塞滿主軸。
  7. flex-basis 控制子元素的主軸長度,主軸是橫的那它的長度就是左至右的寬,主軸是直的那它的長度就是上至下的高 範例

    • 預設 auto 。
    • width 與 flex-basis 一起設定屬性是相衝突的,所以它們並非取其一。看誰屬性強就依此為準。
    • 也是有人使用 flex-basis:auto; 就等於內容的寬。
  8. flex-grow + flex-basis 範例

    • 環境 : 一行三個 item 要等寬於 box 中,可使用 flex-basis 與 flex-grow :
    1. Flex-basis 設定 0,表示每個 item 寬度為 0,所以 grow 是可以去利用整個父層的空間,把整個父層空間另做分配 ( 用比例分配方式來分父層 ) 。但比較適用單列,多列會有點問題。
    2. item 設定 flex-basis:0px;
    3. item 們有三個,分三個 1/3 設定 flex-grow:1;
  9. flex-shrink flex-grow 的反向,內容物超出父元素時,所使用的壓縮比例。範例

    • 預設:1
      • 未預防內容物太大超出父元素,所以預設1讓內容物們被壓縮的比例相同。
    • 分配並不像多餘空間是以設定的比例直接分配,而是還要考慮原來盒子的大小。因爲當盒子大小不同時,能夠承受被壓縮的程度不同。
    • 是用加權計算 :
      • 總比值:各子項目寬度去乘上他的收縮值,並加總這所有子項目計算結果。
      • (子項目寬度 * 收縮比 (flex-shrink) / 總比值)* 超出值=扣除值。
    • flex-shrink 實際應用:兩個側邊欄,一邊固定比例,另一邊隨瀏覽器收縮。

示意圖

images

images

images


資料統整來源:

關於筆者

暱稱:EchoCarrie

文章列表 文章列表