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