iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 16
1
Modern Web

HTML 與 CSS 學習筆記系列 第 16

Day16 - Flex (3) - 軸線、justify-content 與 align-items

軸線

  • 主軸 (main axis) 與交錯軸 (cross axis) 的關係如下表
    • 二者一定是垂直關係
    • 交錯軸只有上至下與左至右 2 種
主軸屬性 flex-direction 主軸方向 交錯軸方向
row 左至右 → 上至下 ↓
row-reverse 右至左 ← 上至下 ↓
column 上至下 ↓ 左至右 →
column-reverse 下至上 ↑ 左至右 →

justify-contentalign-items

  • justify-content:是依照主軸的狀況來進行對齊,因此要確認 flex-direction 的設定值,預設值為 row 左至右
  • 各屬性參數如下,參考圖面會比較了解,flex-direction:row
    • flex-start:對齊起始點(靠左對齊)
    • flex-end:對齊終點(靠右對齊)
    • center:對齊中間(置中對齊)
    • space-between:與外容器無間隔(前後不留),剩下的空間平均分配(依下圖分 2 份)
    • space-around:與外容器有間隔(前後有留),以內元件數均分(依下圖分 3 份),前後 2 側各半
    • space-around:與外容器有間隔(前後有留),剩下的空間依前後與間隔平均分配(依下圖分 4 份)

image alt

from:https://www.w3.org/TR/css-flexbox-1/#justify-content-property

image alt

from:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  • align-items:是依照主軸的狀況來進行對齊,因此要確認 flex-direction 的設定值,預設值為 row 左至右,因此交錯軸為上至下
  • 各屬性參數如下,參考圖面會比較了解,flex-direction:row
    • flex-start:對齊起始點(靠上對齊)
    • flex-end:對齊終點(靠下對齊)
    • center:對齊中間(垂直置中對齊)
    • stretch:內元件填滿整個容器
    • baseline:依照內元件的基準線(文字)對齊

image alt

from:https://www.w3.org/TR/css-flexbox-1/#align-items-property

image alt

from:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

最好實際把各個參數練習一下,感受排版的差異

Flex 六角線上模擬器

參考資料

次回

再繼續說明 Flex


上一篇
Day15 - Flex (2) - 外容器、軸線
下一篇
Day17 - Flex (4) - flex-wrap、flex-flow、內元件
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言