CSS - justify-items 属性

你好，有抱负的网页开发者们！今天，我们将深入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-end	将项对齐到结束处（对于弹性容器）
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 类似，但它们专门用于弹性容器。它们就像是 start 和 end 的酷表亲，只出现在弹性聚会上。

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