CSS - place-self 属性：初学者指南

你好，未来的CSS大师们！今天，我们将深入CSS的奇妙世界，探索一个相当实用的属性——place-self。如果你对这个属性感到陌生，不用担心；我会一步一步地引导你，就像我多年来对我的学生做的那样。在本教程结束时，你将能够像专业人士一样放置元素！

CSS - Place Self

place-self 是什么？

在我们跳入深水区之前，让我们从基础开始。place-self属性是一个简写属性，用于在单个声明中设置align-self和justify-self属性。这就好比一石二鸟，但更加人道且与CSS相关！

place-self的语法非常简单：

place-self: <align-self> <justify-self>;

如果你只提供一个值，它将同时应用于align-self和justify-self。这就像点了一个套餐——你花的钱得到两样东西！

现在，让我们来看看我们可以与place-self一起使用的各种值。我会以表格的形式展示它们，我发现这有助于学生更容易消化信息：

值	描述
auto	元素继承其父容器的align-self/justify-self行为
normal	元素根据文档的正常流定位
start	将元素对齐到容器的开始位置
end	将元素对齐到容器的结束位置
center	将元素在其容器内居中
stretch	拉伸元素以填充容器
flex-start	将元素对齐到flex容器的开始位置
flex-end	将元素对齐到flex容器的结束位置
self-start	将元素对齐到其自身轴的开始位置
self-end	将元素对齐到其自身轴的结束位置
baseline	将元素对齐到容器的基线
first baseline	将元素对齐到容器的第一个基线
last baseline	将元素对齐到容器的最后一个基线

place-self属性适用于网格项和flex项。这就像是一种只有特定超级英雄（或者在我们的情况下，元素）才拥有的特殊能力！

现在，让我们深入一些示例，看看这些值在实践中是如何工作的。

.item {
place-self: normal start;
}

这个声明根据正常流进行对齐，并将元素定位在容器的开始位置进行对齐。就像告诉你的元素，“保持正常，但从开始处开始！”

.item {
place-self: auto center;
}

在这里，我们说的是，“继承你的父元素的对其方式，但在水平方向上居中。”这非常适合当你想要你的元素垂直方向随波逐流，但在水平方向上突出时。

.item {
place-self: center normal;
}

这会将元素垂直居中，但在水平方向上保持正常流。想象一下你的元素在一个聚会上——它位于房间的正中央，但仍然遵循通常的聚会礼仪！

.item {
place-self: end normal;
}

这会将元素垂直对齐到容器的末尾，同时在水平方向上保持正常流。就像你的元素在人群中踮着脚站在后面！

.item {
place-self: start auto;
}

这会将元素垂直定位在其容器的开始位置，并继承水平对齐。它说的是，“我将从顶部开始，但在水平方向上随波逐流。”

.item {
place-self: self-start auto;
}

这会将元素垂直对齐到其自身的开始边缘，并继承水平对齐。就像你的元素在说，“我在垂直方向上会自己做决定，但在水平方向上我会跟随大众。”

.item {
place-self: self-end normal;
}

这会将元素垂直对齐到其自身的末尾边缘，同时在水平方向上保持正常流。就像你的元素在向天空伸展，同时双脚坚定地站在地面上！

.item {
place-self: flex-start auto;
}

在flex容器中，这会将元素垂直对齐到容器的开始位置，并继承水平对齐。这对于想要从顶部开始但随flex流水平移动的flex项来说非常完美。

.item {
place-self: flex-end normal;
}

在flex容器中，这会将元素垂直对齐到容器的末尾，同时保持水平方向上的正常流。就像你的flex项在做倒立！

.item {
place-self: baseline normal;
}

这会将元素的基线与容器的基线垂直对齐，并保持水平方向上的正常流。这对于跨不同元素保持文本对齐非常有用。

.item {
place-self: last baseline normal;
}

类似于基线，但如果存在多个基线，则使用最后一个基线。就像确保你的元素有最后的发言权！

.item {
place-self: stretch auto;
}

这将使元素垂直填充其容器，并继承水平对齐。就像你的元素在说，“我会尽可能高地伸展，但在水平方向上我会随波逐流。”

就是这样，伙计们！我们已经探索了place-self属性及其各种值。记住，掌握CSS的关键是练习。所以，继续摆弄这些值，混合搭配，看看你能创造出多么美丽的布局！

在我多年的教学经验中，我发现那些实验和享受CSS乐趣的学生往往学得更快，记得更牢。所以不要害怕创新！谁知道呢？你可能会发现一种成为你标志性风格的组合。

快乐编码，愿你的元素总是完美放置！

Credits: Image by storyset