iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 29
1

flex 有自己專屬的對齊屬性,vertical-align、text-align 甚至 float 都是叫不動 flex items 的。想要讓 flex items 對齊,首先要先確定主軸(main axis)與副軸(cross axis)的方向,而這取決於 flex direction 屬性與書寫模式 writing-mode。

在上一篇文章中介紹了 justify-content 與 align-items 兩個屬性,今天將介紹 align-content 與 align-self。同樣的,在進入主題前,快速複習一下這兩張圖。


align-content 屬性

控制「多行(multi-line)主軸」在副軸上的對齊方式,也就是前提為 flex container 的 flex-wrap 屬性值須為 wrapwrap-reverse,而非預設的 flex-wrap: nowrap。僅適用於 flex container。

以下圖形範例以主軸(main axis)為 row(橫向),副軸(cross axis)為 column(縱向)來說,即 flex-direction: row 下:


  • flex-start
    「多行(multi-line)主軸」對齊副軸始端


  • flex-end
    「多行(multi-line)主軸」對齊副軸末端

  • center
    「多行(multi-line)主軸」置中副軸

  • space-between
    第一個最後一個 line 對齊副軸始端末端,其餘空間平均分佈於 flex items 之間。

  • stretch
    延伸撐滿副軸

  • space-around
    每個 line 兩旁像自備 x 空間,第一個與最後一個 line 與 container 的之間有 x 空間,而 lines 兩兩之間有 2x 空間。

  • space-evenly
    每個 line 左右各有 x 空間,第一個與最後一個 line 與 container 的之間的空間亦為 x




align-self 屬性

也可以單獨控制個別 flex item 在副軸上的對齊方式。僅適用於 flex items。

以主軸(main axis)為 row(橫向),副軸(cross axis)為 column(縱向)來說,即 flex-direction: row 下:

  • flex-start
    flex item 由副軸始端開始排列。

  • flex-end
    flex item 由副軸末端開始排列。

  • center
    flex item 置中副軸

  • stretch
    flex item 撐滿副軸

  • baseline
    flex item 對齊 baseline



最後連同上一篇文章做個總整理

  • 適用於 flex container

    • justify-content
      控制主軸上所有 flex items 的對齊。
    • align-items
      控制副軸上所有 flex items 的對齊。
    • align-content
      控制「多行(multi-line)主軸」在副軸上的對齊方式。
  • 適用於 flex items

    • align-self
      控制副軸上個別 flex item 的對齊。



有關 flex 的對齊屬性就告一段落拉!
掰囉


/images/emoticon/emoticon35.gif


參考資料

W3C-Flexible Box Layout Module Level 1
CSS TRICKS-A Complete Guide to Flexbox
MDN-Aligning Items in a Flex Container


上一篇
flex 6
下一篇
前端新手進化史-總結
系列文
前端新手進化史30

1 則留言

0
Chris
iT邦新手 5 級 ‧ 2019-10-15 14:43:19

早知道就寫 flex 30 搞不好還行。

我要留言

立即登入留言