Skip to main content

Flex 速記

對某個 Selector 套用 Flex

須把 display 屬性設成 flex，如下：

display: flex;

沒了，就這麼簡單。

似乎只要套用 Flex 後連該 element （其實已經變成 Flex container了）底下的子 element （item）也會跟著套用，所以如果確定父子關係的話，那其實只要在最上層套用 Flex 屬性就好。

基本的方向調整

  • flex-direction : 決定 container 底下的 item 要往哪個方向排列，最基本有 row 和 column 兩種，如果要反過來的話可以在這兩個後面加上 -reverse，如 row-reverse
    • 這決定了你的 main axis 和 cross axis 是啥
  • flex-wrap : 決定 item 超出範圍後該怎麼處理，有 nowrap 、 wrap 和 wrap-reverse 三種

對齊

  • justify-content : 調整 Flex item 之間的對齊方式，根據 flex-direction 不同 main-axis 方向也不同
    • flex-start: 往 main-axis 開始方向對齊
    • flex-end: 與上面相反
    • center: 置中
    • space-around: "item" 周圍留空白
    • space-evenly: "item 和 item 和邊界之間" 留空白（空白等距）
  • align-items : 同上，但這是調整 cross-axis 方向
    • stretch: 預設對齊方式，直接撐開 item
    • flex-start: 從 cross-axis 開始方向對齊
    • flex-end: 與上面相反
    • center: 放中間
    • baseline: 對 item 底部做對齊
  • align-content : 決定怎麼 warp container 裡面的 item
    • stretch、flex-start、flex-end、center、space-around、space-evenly、space-between
    • 類似 justify-content 的效果，但要空間不足（觸發 wrap）才會有效

Space 相關

  • row-gap : 每列之間的 space 多少 (px)
  • column-gap : 每欄之間的 space 多少 (px)

Item 相關

  • flex-basis : 每個 item 要有多大的空間 (px)
  • flex-grow: 每個 item 佔整個 container 的「比例」是多少
    • 要以 Container 扣掉 padding 等外圍空間後剩下實際所佔用的空間去做計算
  • align-self: 各自 Item 版本的 align-items

綜合體

  • flex-flow : <flex-direction> <flex-wrap>
  • gap: <row-gap> <column-gap>
  • flex: <grow> <shink> <basic>

 

 

 

Back to top