CSS中的justify-self属性

在CSS中，可以使用justify-self属性来定义单个元素在grid中如何对齐。这个属性只对网格项目有用。

使用方式

可选值有以下几种：

• start：委托元素对齐到其网格区域的开头。
• end：委托元素对齐到其网格区域的末尾。
• center：委托元素在其网格区域中居中对齐。
• stretch：挤压元素，以适合其网格区域的长度（这是默认值）。
• baseline：委托元素基线对齐到其网格区域的基线。

示例

HTML

<div class="grid-container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  height: 200px;
  background-color: #f2f2f2;
}

.item {
  background-color: #bfbfbf;
  padding: 20px;
  font-size: 30px;
  text-align: center;
  color: white;
}

.item1 {
  justify-self: start;
}

.item2 {
  justify-self: center;
}

.item3 {
  justify-self: end;
}

输出结果

分析

在上面的示例中，我们定义了一个网格容器，并将它分成了三个相等的列。每个网格单元格都有一个10像素的间隙，并且网格容器的高度设置为200像素。

每个网格单元格有一个item类，这个类定义了它们的样式。对于三个不同的网格单元格，我们分别将它们的justify-self属性设置为start、center和end。这将使它们分别对齐到它们所在网格区域的左边缘、中心和右边缘。

如上面的示例所示，使用justify-self属性可以非常方便的控制单个网格单元格的对齐方式。