CSS - justify-items 屬性

Hello, 有志於網頁開發的朋友們！今天，我們將要深入CSS的奇妙世界，並探討一個能讓你的佈局看起來像是由資深專業人士精心打造屬性。我說的是 justify-items 屬性。相信我，在這個教學結束時，你將能像最高法院法官一樣對齊項目！

justify-items 是什麼？

在我們深入細節之前，讓我們先了解 justify-items 是做什麼的。想像一下你有一個填滿了可愛小項目的網格容器。justify-items 屬性就像一根魔杖，讓你可以控制這些項目在它們網格區域內的行內（通常是水平的）軸上如何對齊。

語法

justify-items 的基本語法非常直觀：

.container {
justify-items: value;
}

其中 value 可以是許多我們即將探討的選項之一。但首先，讓我們建立一個簡單的網格來玩：

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

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

.item {
background-color: #3498db;
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}

這樣就創造了一個 2x2 的網格，其中有四個項目。現在，讓我們來探討 justify-items 可以使用哪些不同的值！

可能的值

這裡是一個包含所有可能的 justify-items 值的表格：

值	描述
normal	預設值，通常行為像 stretch
stretch	拉伸項目以填滿網格區域
start	對齊到網格區域的開始
end	對齊到網格區域的結尾
center	在網格區域中居中對齊
flex-start	對齊到容器的開始（對於flex容器）
flex-end	對齊到容器的結尾（對於flex容器）
self-start	對齊到它們自己的開始側
self-end	對齊到它們自己的結尾側
left	對齊到左側
right	對齊到右側
baseline	沿著基線對齊
last baseline	沿著最後的基線對齊
safe center	安全地居中對齊（防止數據丟失）
legacy right	右對齊（傳統支援）

現在，讓我們用範例來拆解這些值！

CSS justify-items - normal 值

.grid-container {
justify-items: normal;
}

normal 值是預設值。在大多數情況下，它的行為像 stretch。就像告訴你的網格項目："只需做你自己！"

CSS justify-items - stretch 值

.grid-container {
justify-items: stretch;
}

使用 stretch，你的項目會伸展以填滿它們的網格區域。就像告訴你的項目去深深地呼吸並擴張！

CSS justify-items - start 值

.grid-container {
justify-items: start;
}

start 值將你的項目對齊到它們網格區域的開始。把它想像成在賽跑起跑線上排好你的項目。

CSS justify-items - end 值

.grid-container {
justify-items: end;
}

相反，end 將你的項目推到它們網格區域的結尾。就像你的項目試圖觸碰終點線！

CSS justify-items - center 值

.grid-container {
justify-items: center;
}

center 做了你期望的事——在它們的網格區域中居中對齊你的項目。這對創造平衡、禪宗式的佈局非常完美。

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

.grid-container {
justify-items: flex-start;
}

.grid-container {
justify-items: flex-end;
}

這些值與 start 和 end 相似，但它們專門為 flex 容器設計。它們就像是 start 和 end 的酷炫表親，只有在 flex 派對上才出現。

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

.grid-container {
justify-items: self-start;
}

.grid-container {
justify-items: self-end;
}

這些值將項目對齊到它們自己的開始或結尾側，這在某些書寫模式下可能與容器的開始或結尾不同。就像讓每個項目自己決定他想睡在哪一邊的床上！

CSS justify-items - left 和 right 值

.grid-container {
justify-items: left;
}

.grid-container {
justify-items: right;
}

這些值正如它們所說的那樣——將項目對齊到左側或右側。簡單直接，就像早晨一杯好咖啡。

CSS justify-items - baseline 和 last baseline 值

.grid-container {
justify-items: baseline;
}

.grid-container {
justify-items: last baseline;
}

這些值將項目沿著它們的基線或最後的基線對齊。當你有不同大小的文字並希望它們對齊時，這特別有用。

CSS justify-items - safe center 值

.grid-container {
justify-items: safe center;
}

這個值將項目居中，但確保不會發生數據丟失。就像是為你的居中項目提供了一個安全網！

CSS justify-items - legacy right 值

.grid-container {
justify-items: legacy right;
}

這個值是為了向後兼容。就像保留一台舊的翻蓋手機——你可能不會使用它，但如果你需要它，它就在那裡！

這就是你們的，各位！你剛剛對 justify-items 屬性進行了一次旋風式的旅行。記住，精通CSS的關鍵在於練習。所以，去嘗試這些值，創造一些美麗對齊的佈局。在你還不知道的時候，你將會在睡夢中對齊項目！

快樂編程，願你的網格總是完美對齊！??‍??‍?

Credits: Image by storyset