CSS justify-self 属性

CSS justify-self 属性用于定义单个网格项目在网格容器中的水平对齐方式。

语法

/* Keyword values */
justify-self: auto;
justify-self: normal;
justify-self: stretch;
justify-self: center;
justify-self: start;
justify-self: end;
justify-self: flex-start;
justify-self: flex-end;
justify-self: self-start;
justify-self: self-end;
/* Global values */
justify-self: inherit;
justify-self: initial;
justify-self: unset;

属性值

• auto：默认值，如果所属网格容器的 justify-items 属性为 stretch，则元素将进行伸展（填充）并占用整个行；如果所属网格容器的 justify-items 属性为非 stretch 值，则元素按照该属性的值进行对齐。
• normal：元素按照所在行的网格项所设置的值进行对齐。
• stretch：元素在所在行上伸展（填充）并占用整个行。
• center | start | end | flex-start | flex-end | self-start | self-end：分别对应于水平居中、左对齐、右对齐、起始位置对齐以及结束位置对齐等方式。

实例

以下示例演示如何使用 justify-self 属性来改变单个网格项目在网格容器中的水平对齐方式：

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

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

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

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

.item-4 {
  justify-self: flex-start;
}

.item-5 {
  justify-self: flex-end;
}

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

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

效果如下：