CSS justify-self 属性

概述

justify-self 属性用于设置网格元素在其网格单元格的水平对齐方式。与 justify-content 属性只能作用于网格容器不同， justify-self 属性是应用于单个网格元素，覆盖 justify-content 属性。

语法

grid-column-start: <align-self>

其中，<align-self> 可以是下列值之一：

• start：将元素左对齐
• end：将元素右对齐
• center：将元素水平居中
• stretch：将元素水平拉伸以填满网格单元格

示例

以下示例演示了如何使用 justify-self 属性设置单个网格元素的水平对齐方式：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

.item {
  background-color: #eee;
  border: 1px solid #333;
}

.item-1 {
  justify-self: start;
}

.item-2 {
  justify-self: center;
}

.item-3 {
  justify-self: end;
}

.item-4 {
  justify-self: stretch;
}

<div class="grid">
  <div class="item item-1">内容1</div>
  <div class="item item-2">内容2</div>
  <div class="item item-3">内容3</div>
  <div class="item item-4">内容4</div>
  <div class="item">内容5</div>
  <div class="item">内容6</div>
  <div class="item">内容7</div>
  <div class="item">内容8</div>
  <div class="item">内容9</div>
</div>

以上示例将创建一个 3x3 的网格，设置了 justify-self 属性的四个元素将分别左对齐、水平居中、右对齐和水平拉伸以填满网格单元格。其余五个元素将按照默认的水平对齐方式进行布局。

注意事项

• justify-self 属性只能应用于网格元素，不能应用于非网格元素。
• 如果同时设置了 justify-self 和 justify-items 属性，则 justify-self 属性将覆盖 justify-items 属性。