网格布局中 justify-self align-self 和 place-self

justify-self

沿着 行轴线（水平方向） 对齐网格项中的内容（justify the content within individual grid items），此值适用于单个网格项内的内容（applying the justify-self property to the grid item itself）。

值：

stretch ：默认值，填满 网格区域 的宽度（This is the default value. Fills up the width of the grid area.） start：将 网格项中的内容 对齐到 网格区域 的水平起始边界位置（Justifies content of the grid item with the starting edge of the grid area along the row-axis） center：将 网格项中的内容 对齐到 网格区域 的水平中间位置（Aligns content of the grid item in the center of the grid area along the row-axis） end：将 网格项中的内容 对齐到 网格区域 的水平尾部边界位置（Justifies content of the grid item with the ending edge of the grid area along the row-axis）

align-self

沿着 列轴线（垂直方向） 对齐 网格项中的内容（alignment the content within individual grid items），此值适用于单个网格项内的内容（apply the align-self property to the grid item itself）。

值：

stretch ：默认值，填满 网格区域 的高度（This is the default value. Fills up the height of the grid area.） start ：将 网格项中的内容 对齐到 网格区域 的垂直顶部起始边缘位置（Aligns content of the grid item with the starting edge of the grid area along the column-axis） center ：将 网格项中的内容 对齐到 网格区域 的垂直中间位置（Aligns content of the grid item in the center of the grid area along the column-axis） end ：将 网格项中的内容 对齐到 网格区域 的垂直底部边缘（Aligns content of the grid item with the ending edge of the grid area along the column-axis）

place-self

place-self 是设置 align-self 和 justify-self 的简写形式。

值：

auto： 布局模式的 “默认” 对齐方式。 < align-self > < justify-self >：第一个值设置 align-self 属性，第二个值设置 justify-self 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。

举例：

.item-a {
          
   
  place-self: center;
}