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;
}