iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
1
Modern Web

重新認識 Flex 和 Grid系列 第 29

[Day29] grid 項目對齊屬性

如果熟悉 flexbox 的對齊屬性,在這邊的用法也是大同小異。在 grid 中因為沒有主次軸的概念, justify-* 通常是操控"行",align-* 是操控"列"。grid 容器對齊屬性要見Day25,而能夠使用在 grid 的項目對齊屬性包括:

1.justify-self
2.align-self


justify-self / align-self

.item {
  justify-self: stretch | start | end | center | left | right | self-start | self-end | baseline | first baseline | last baseline;
  align-self: stretch | start | end | center | self-start | self-end | baseline | first baseline | last baseline;
}
預設:stretch

繼 flexbox 了解到項目中的給予 align-self 屬性是可以在單一一個項目裡覆寫容器中 align-items 所繼承下來的屬性後,grid 中的 justify-self / align-self 概念也是如此,並且可以操控單一個網格項目在網格容器中的位置。

而 justify-self 是操控網格項目在網格區域中"行"的位置,align-self 則是操控網格項目在網格區域中"列"的位置。

  1. stretch 為預設,在網格項目中沒有設定尺寸時,網格項目會拉伸填滿網格區域。

  2. start、end、center 即為將網格項目對齊網格區域的開頭、終點、中間。(justify-self 的開頭就是左邊、align-self 的開頭是上面)

  3. 在justify-self 中 left、right 屬性值和 start、end 的表現幾乎是一樣的,雖然有些地方有說明 align-self 也有 left、right,但實際用起來沒有什麼作用。

  4. self-start、self-end 雖然同樣是網格項目隊齊網格區域的起始、終點,但對齊的條件多了會"跟隨語言的方向來決定起始和終點"。常見的語言預設上為 direction: ltr;(可以在容器做設定)意即為由左至右的語言,如果換成 rtl 由右至左,則 justify-self 的 self-start、self-end 會跟著相反。

  5. baseline、last baseline、first baseline 會對齊基準線、最後一條基準線、第一條基準線。文件中有對其進行說明:algo-baseline-shims,老實說我有點看不懂在說什麼 XD(然後開始懷疑人生),或許不是個常會使用到的屬性值。


資料來源:


上一篇
[Day28] grid-row / grid-column + grid-area
下一篇
[Day30] grid z-index 分層 / order 順序
系列文
重新認識 Flex 和 Grid30

尚未有邦友留言

立即登入留言