网格布局中 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;
}
1
2
3