淺談 Flex

Flex 外層屬性 (container)

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

• 如果想要區塊元素做並排，可於父層寫 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-direction 與 flex-wrap。 例如： flex-flow:row wrap;

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

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

01. justify-content 主軸對齊方式

// 圖片來源 : 六角學院

justify-content 對齊方式 :

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

02. align-items 交錯對齊方式

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

// 圖片來源 : 六角學院 ▲

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 是英文或其他西方文字會有的文字基線，讓英文字母能夠依照此基準線對齊，可以參考此連結

而 align-items: baseline 就是讓並排的元素的交錯軸依照 baseline 對齊，因此可以看到若有元素中有文字內容看起來就會是這樣:

（來源：align-items – CSS Reference）

資料來源

• 六角學院 : 使用 HTML、CSS 開發一個網站
• Flex 六角線上模擬器
• Flexbox 遊戲
  • Flex pirate 新手關卡
  • Flex 青蛙