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>