CSS Grid 网格布局(入门)- 网格项对齐 justify-self 和 align-self

justify-self 表示网格项在网格单元水平方向的对齐方式。 align-self 表示网格项在网格单元垂直方向的对齐方式。

这两个属性的值跟在网格容器设置的单元对齐 justify-items 是一样的。 可以理解为 justify-self 是某个网格项想要不一样的对齐方式而有的私人属性 “self”。

align-self 这个属性在 flex 布局时也有用到,注意区别。

查看 flex align-self 单个项目对齐

.item {
  justify-self: center;
  align-self: center;
}
  • start: 内容与网格区域的左端对齐。
  • end: 内容与网格区域的右端对齐。
  • center: 内容处于网格区域的中间位置。
  • stretch: 内容宽度占据整个网格区域(默认值)。

JavaScript 语法:

object.style.justifySelf = "center" ;
object.style.alignSelf = "center" ;