iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

大二萌新的學習紀錄系列 第 7

Day 7 : HTML - 上下左右!如何用Flex的屬性去控制grid?

這篇想和大家聊聊,如何用Flex的相關屬性控制CSS grid的排列位置
和Flex能用的屬性大致上一樣,但多了justify-selfjustify-content
也多了align和justify的縮寫place

可用的語法能分成以下三種:

控制「水平方向」

  1. justify-items
  2. justify-self
  3. justify-content

控制「垂直方向」

  1. align-items
  2. align-self
  3. align-content

縮寫

  1. place-items
  2. place-self
  3. place-content

那我們就來看該如何操作它們吧!

首先,我們先看一下HTML和CSS的代碼
HTML:

<div class="grid_container">
    <div class="box box_self_2"></div>
    <div class="box box_self"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box box_self_2"></div>
    <div class="box"></div>
    <div class="box box_self"></div>
</div>

CSS:

.grid_container {
    display:grid;
    grid-template-columns:60px 60px 60px 60px; /* 也可寫成repeat(4, 60px) */
    grid-template-rows:35px 35px; /* 也可寫成repeat(2, 35px) */
}
.box {
    background-color:rgb(238, 164, 44);
    width:40px;
    height:20px;
}
.box_self {
    /* 稍後示範self的時候會用到 */
}	
.box_self_2 {
    /* 稍後示範align-self:baseline的時候會用到 */
}

Justify-items
Justify-items是用來控制網格「內元素」的「水平方向」的對齊位置

可用屬性有以下四種:

  1. Stretch (預設值,想測試請記得內元素不能設定width)
  2. strat
  3. end
  4. center

讓我們看以下範例

CSS:

.grid_container {
    justify-items:stretch | start | end | center;
}

結果如下圖所示:

Stretch是預設值,會往水平方向將內元素全部填滿
如果你有設置width,則不會起作用
https://ithelp.ithome.com.tw/upload/images/20210921/20141088bUMXlF1iLk.png

從水平方向的「起點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/20141088utCEGsAq1b.png

從水平方向的「終點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/20141088swf6w33ylu.png

排在「起點」和「終點」的中間
https://ithelp.ithome.com.tw/upload/images/20210921/20141088mSPE04C2ty.png


Justify-self
Justify-self和justify-items的功能一樣,但它是針對「單一」對象

可用屬性有以下四種:

  1. stretch (預設值,想測試請記得內元素不能設定width)
  2. start
  3. end
  4. center

讓我們看以下範例

CSS:
(注意:這裡的box_self只有box_2box_8有)

.box_self {
	width:auto; /* 想測試stretch請記得加這行 */
    justify-self:stretch | start | end | center;
}

結果如下圖所示:

Stretch是預設值,box_self會往水平方向將內元素全部填滿
如果你有設置width,則不會起作用
https://ithelp.ithome.com.tw/upload/images/20210921/20141088wAbuFEqkC7.png

box_self會從水平方向的「起點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/20141088N8JCED1Q7U.png

box_self會從水平方向的「終點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/20141088cMH5G4RwGv.png

box_self會排在「起點」和「終點」的中間
https://ithelp.ithome.com.tw/upload/images/20210921/20141088bcN4AkELxl.png


justify-content
justify-content是用來控制網格「本身」的「水平方向」的對齊位置

可用屬性有以下六種:

  1. start (預設值)
  2. end
  3. Center
  4. Space-around
  5. Space-between
  6. Space-evenly

讓我們看以下範例

CSS:

.grid_container {
    justify-content:start | end | center | space-around | space-between | space-evenly;
}

結果如下圖所示:

從水平方向的「起點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/20141088F9C946Bv9G.png

從水平方向的「終點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/20141088vvxUHaJsAy.png

排在「起點」和「終點」的中間
https://ithelp.ithome.com.tw/upload/images/20210921/20141088OEdEVuffgN.png

Space-around是平均分配「網格」位置,但左右兩側的間距會較小
https://ithelp.ithome.com.tw/upload/images/20210921/20141088FHXM694isr.png

Space-between是平均分配「網格」位置,但左右兩側會貼齊起點、終點
https://ithelp.ithome.com.tw/upload/images/20210921/20141088LtDIf6ff6p.png

Space-evenly是「網格」和「左右兩側」的間距皆相同
https://ithelp.ithome.com.tw/upload/images/20210921/20141088MT3FxCOvk0.png


align-items
和jusitfy-items的用法類似,都是用來控制網格「內元素」,但align-items它是用來控制「垂直方向」的對齊位置

可用屬性有以下五種:

  1. Stretch (預設值,想測試請記得內元素不能設定height)
  2. start
  3. end
  4. center
  5. baseline (要測試請記得在.box內設font-size:25px,在.box_self內設font-size:unset)

讓我們看以下範例

CSS:

.grid_container {
    align-items:stretch | start | end | center | baseline;
}
.box {
    font-size:25px; /* 想測試baseline請記得加這行 */
}
.box_self {
    font-size:unset; /* 想測試baseline請記得加這行 */
}

結果如下圖所示:

Stretch是預設值,會往垂直方向將內元素全部填滿
如果你有設置height,則不會起作用
https://ithelp.ithome.com.tw/upload/images/20210921/20141088An9ctMSa37.png

從垂直方向的「起點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/201410889vKibQQYcM.png

從垂直方向的「終點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/201410887uwKKe4XkF.png

排在「起點」和「終點」的中間
https://ithelp.ithome.com.tw/upload/images/20210921/20141088vubn7GdODe.png

baseline都是以「字體下方」去做對齊
要測試請記得在**.box內設font-size:25px,在.box_self**內設font-size:unset
https://ithelp.ithome.com.tw/upload/images/20210921/201410884Vjn8KCX2M.png


align-self
align-self和align-item的功能一樣,但它是針對「單一」對象

可用屬性有以下五種:

  1. Stretch (預設值,想測試請記得內元素不能設定height)
  2. start
  3. end
  4. center
  5. baseline (想測試請記得在.box_self內設font-size:30px)

讓我們看以下範例

CSS:

.box_self {
    height:auto; /* 想測試stretch請記得加這行 */
    align-self:stretch | start | end | center | baseline;
	font-size:25px; /* 想測試baseline請記得加這行 */
}
.box_self_2 {
    align-self:baseline; /* 想測試baseline請記得加這行 */
}

結果如下圖所示:

Stretch是預設值,box_self會往垂直方向將內元素全部填滿
如果你有設置height,則不會起作用
https://ithelp.ithome.com.tw/upload/images/20210921/20141088krm9gMugcq.png

box_self會從垂直方向的「起點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/201410887YQj7oUHy6.png

box_self會從垂直方向的「終點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/20141088VTX5ZSY2vu.png

box_self會排在「起點」和「終點」的中間
https://ithelp.ithome.com.tw/upload/images/20210921/20141088cgscmo3s21.png

box_self會排在「字體下方」
想測試請記得在.box_self內設font-size:25px,並在.box_self_2內設align-self:baseline
https://ithelp.ithome.com.tw/upload/images/20210921/20141088MJLZ4OD8EJ.png


align-content
和justify-content的用法相似,都是用來控制網格「本身」,但align-content它是用來控制「垂直方向」的對齊位置

可用屬性有以下六種:

  1. start (預設值)
  2. end
  3. center
  4. space-around
  5. space-between
  6. space-evenly

讓我們看以下範例

CSS:

.grid_container {
    align-content:start | end | center | space-around | space-between | space-evenly;
}

結果如下圖所示:

從垂直方向的「起點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/20141088pAnrolLbEq.png

從垂直方向的「終點」開始排
https://ithelp.ithome.com.tw/upload/images/20210921/20141088hrYfYeqjs1.png

排在「起點」和「終點」的中間
https://ithelp.ithome.com.tw/upload/images/20210921/20141088k0viBn5mfx.png

Space-around是平均分配「網格」的位置,但上下兩側的間距會較小
https://ithelp.ithome.com.tw/upload/images/20210921/20141088j5I7Busb24.png

Space-between是平均分配「網格」的位置,但上下兩側會貼齊垂直方向的起點、終點
https://ithelp.ithome.com.tw/upload/images/20210921/20141088zj6XhOW3T2.png

Space-evenly是「網格」和「上下兩側」的間距皆相同
https://ithelp.ithome.com.tw/upload/images/20210921/20141088dsnF07ueSZ.png


Place-items
Place-items是align-itemsjustify-items的縮寫
寫的順序為place-items:align-items 「空格」 justify-items

讓我們看以下範例

CSS:

.grid_container {
    place-items:center end;
}

結果如下圖所示:

垂直方向為center,水平方向為end
https://ithelp.ithome.com.tw/upload/images/20210921/201410886SWeIeN83t.png

Place-self
Place-self是align-selfjustify-self的縮寫
寫的順序為place-self:align-self 「空格」 justify-self

讓我們看以下範例

CSS:

.box_self {
    place-self:center end;
}

結果如下圖所示:

垂直方向為center,水平方向為end
https://ithelp.ithome.com.tw/upload/images/20210921/20141088a9raGsItvf.png

Place-content
Place-content是align-contentjustify-content的縮寫
寫的順序為place-content:align-content 「空格」 justify-content

讓我們看以下範例

CSS:

.grid_container {
    place-content:center space-around;
}

結果如下圖所示:

垂直方向為center,水平方向為space-around
https://ithelp.ithome.com.tw/upload/images/20210921/201410884YInKaPUln.png


以上就是用和Flex相關的屬性去控制grid的介紹

有人會問,為什麼grid可以用justify-itemjustify-self,而Flex不行?
這個我決定放在下篇(Day 8)和各位解釋原因,並示範替代方案來展現justify-self的效果,想了解的明天記得來看喔!

希望大家看完Day 6和這篇,能夠對grid的操作更加了解
如果還不會Flex,也歡迎去Day 5看一下相關介紹喔!
只要會了grid和Flex,並學會同時使用,保證沒有什麼網頁是你刻不出來的!


參考資料:
https://css-tricks.com/snippets/css/complete-guide-grid/#prop-justify-items


上一篇
Day 6 : HTML - 網頁排版超強神器part_2,CSS grid到底是什麼?
下一篇
Day 8 : HTML – 為什麼Flex沒有justify-items和justify-self,而grid卻有?
系列文
大二萌新的學習紀錄30

尚未有邦友留言

立即登入留言