Flex 外層屬性 (container)

淺談flex_01

// 左方為外層屬性,右方為內層屬性。 圖片出處 : 六角學院 ▲

  • 如果想要區塊元素做並排,可於父層寫 display:flex;
  • 子元素們會依照比例做伸縮調整,不會超出父層寬度。 ( CODEPEN 範例連結 )
  • 子元素在沒有設定高度前提下預,設皆等高 ,但需要寫文字否則無法撐開高度。
  • 子元素會自動延伸與同層內最高元素的高度。 ( CODEPEN 範例連結 )
    • 範例中 .box 2 沒有設定高度,但它會自動延伸與子元素中高度最高的 .box3 同高。

flex-direction – 決定 flex 軸線水平或垂直

flex-direction

  • row ( 預設 )
  • column
  • row-reverse 反向
  • column-reverse 反向

flex-wrap – 決定換行屬性

flex-wrap

  • nowrap ( 預設 )
  • wrap
  • wrap-reverse

flex-flow

flex-flow 為 flex-direction 與 flex-wrap 縮寫

  • 依序寫入 flex-directionflex-wrap。 例如: flex-flow:row wrap;

| 主軸與交錯軸對齊方式 |

主軸對齊使用 justify-content ,交錯軸對齊使用 align-items

01. justify-content 主軸對齊方式

淺談flex_02

// 圖片來源 : 六角學院

justify-content 對齊方式 :

  • flex-start : 對齊主軸起點
  • flex-end : 對齊主軸終點
  • center : 對齊主軸水平線
  • space-between : 平均分配每個元素,首元素與末元素會分別對齊主軸起點與終點。
  • space-around
  • space-evenly : 與 space-around 很像,但中間留白與左右邊線距離一樣 。

02. align-items 交錯對齊方式

淺談flex_03

// align-items軸線觀念 。 圖片來源 : 六角學院 ▲

淺談flex_04
// 圖片來源 : 六角學院 ▲

align-items 對齊方式 :

  • flex-start
  • flex-end
  • center
  • strech : 延伸 100% 交錯軸。
  • baseline : 讓並排元素的文字照基線做對齊。

align-content

  • align-content 決定行之間的間隔,而 align-items 決定元素整體在容器的什麼位置。
  • 只有一行時 align-content 是無效的。

flex 中圖片變型原因

區塊設定 flex, 而 align-items 預設會是 stretch,會自動延伸與同層內最高元素
的高度 ,如果遇到隔壁排內容比圖片還多,圖片會因此產生變形。
建議設定 align-items: center ( 非 stretch ) 讓圖片恢復原比例。 Codepen 範例


課堂問與答統整

Q align-items:baseline; 是做什麼的 ?
hsin-yu 助教回覆學員 Blake Chen 的問題 ( 出處 )

Baseline 是英文或其他西方文字會有的文字基線,讓英文字母能夠依照此基準線對齊,可以參考此連結
淺談flex_05

align-items: baseline 就是讓並排的元素的交錯軸依照 baseline 對齊,因此可以看到若有元素中有文字內容看起來就會是這樣:
淺談flex_06
(來源:align-items – CSS Reference

資料來源

最後修改日期: 29 10 月, 2020

作者