CSS - justify-self 屬性：精通網格項目對齊

你好啊，未來的 CSS 巫師們！今天，我們將要進入 justify-self 屬性的神奇世界。作為你們友好的鄰居電腦老師，我將指導你們走過這個令人興奮的旅程。所以，拿起你們的虛擬魔杖（鍵盤），讓我們來施展一些 CSS 的魔法！

justify-self 是什麼？

在我們深入細節之前，讓我們先了解一下 justify-self 實際上是做什麼的。想像你有一個網格容器，裡面有各種網格項目。justify-self 屬性允許你沿著行內（水平）軸對這些個別的網格項目進行對齊。這就像給每個項目一個專屬的造型師，來決定它應該在聚光燈下站在哪裡！

語法與可能的值

justify-self 的基本語法非常直接：

.grid-item {
justify-self: value;
}

現在，讓我們看看我們可以使用所有可能的值：

值	描述
auto	開瀏覽器決定對齊方式
normal	與 auto 相似
stretch	拉伸項目以填滿單元格
start	對齊到單元格的開始位置
end	對齊到單元格的結束位置
center	在單元格中間對齊項目
flex-start	對齊到開始位置（對於 flex 容器）
flex-end	對齊到結束位置（對於 flex 容器）
self-start	基於項目的方向對齊到開始位置
self-end	基於項目的方向對齊到結束位置
left	對齊到單元格的左邊
right	對齊到單元格的右邊
baseline	對齊到單元格的基線
last baseline	對齊到單元格的最後基線

哇，這個列表還真長！如果這讓你覺得不知所措，別擔心；我們會通過範例來一一解析。

应用範圍

在我們進入範例之前，重要的是要注意 justify-self 应用於：

• 網格項目
• 含有網格容器的絕對定位元素

現在，讓我們來探討每個值，並提供一些實用的範例！

CSS justify-self - auto 值

.grid-item {
justify-self: auto;
}

使用 auto 時，瀏覽器會掌握方向盤。這就像告訴你的項目，“去你認為最合適的地方！”通常，這會表現得與 stretch 相似。

CSS justify-self - normal 值

.grid-item {
justify-self: normal;
}

normal 是默認值，並且通常對於網格項目來說，其行為與 stretch 相似。這是 justify-self 值中的“我要碰運氣”！

CSS justify-self - stretch 值

.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
}

.grid-item {
justify-self: stretch;
background-color: lightblue;
}

這個值會拉伸項目以填滿其網格單元的整個寬度。這就像告訴你的項目，“要麼做大，要麼回家！”

CSS justify-self - start 值

.grid-item {
justify-self: start;
}

這會將項目對齊到其網格單元的開始邊緣。把它想像成項目緊緊地擁抱著房間左牆。

CSS justify-self - end 值

.grid-item {
justify-self: end;
}

與 start 相反，這會將項目推到單元格的結束邊緣。這就像項目在右牆後面玩捉迷藏。

CSS justify-self - center 值

.grid-item {
justify-self: center;
}

這會將項目放在單元格的正中央。對於那些喜歡成為焦點的項目來說，這是完美的！

CSS justify-self - flex-start 和 flex-end 值

.grid-item {
justify-self: flex-start; /* 或 flex-end */
}

這些值與 start 和 end 相似，但通常用於 flex 上下文。在網格佈局中，它們通常與 start 和 end 的行為相同。

CSS justify-self - self-start 和 self-end 值

.grid-item {
justify-self: self-start; /* 或 self-end */
}

這些值會基於項目的自身方向進行對齊。如果項目的 direction 是 ltr（從左到右），則 self-start 將與 start 相同。這就像項目有一個永遠指向其個人北方的指南針！

CSS justify-self - left 和 right 值

.grid-item {
justify-self: left; /* 或 right */
}

這些值會將項目對齊到單元格的左邊或右邊，而不論書寫模式或方向如何。它們就像 start 和 end 的固執表親，總是知道他們想在哪裡。

CSS justify-self - baseline 和 last baseline 值

.grid-item {
justify-self: baseline; /* 或 last baseline */
}

這些值會將項目對齊到網格單元的基線。當你有文本內容並希望與鄰接單元格中的其他文本完美對齊時，這特別有用。

總結

現在我們已經探索了所有這些值，讓我們創建一個有趣的範例，展示多個 justify-self 值的使用：

<div class="grid-container">
<div class="grid-item start">Start</div>
<div class="grid-item end">End</div>
<div class="grid-item center">Center</div>
<div class="grid-item stretch">Stretch</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}

.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}

.start { justify-self: start; }
.end { justify-self: end; }
.center { justify-self: center; }
.stretch { justify-self: stretch; }

在這個範例中，我們有一個網格容器，其中有四個項目，每個項目都展示了不同的 justify-self 值。這就像一個小小的 CSS 時尚秀，每個項目都以自己獨特的方式走秀！

至此，親愛的學生們，我們已經穿越了 justify-self 的領地，探索了它的各種面貌和可能性。記住，CSS 是關於實驗和創造力的。不要害怕混合和匹配這些值來創建有你自己風格的佈局。

當我們結束這堂課時，我想到一位睿智的老 CSS 長者曾經說過，“力量越大，責任越大... 創造出色的佈局！”所以，勇往直前，實驗吧，願你的網格永遠完美對齊！

Credits: Image by storyset