hooyantsing's Blog

P151_25_组合简写栅格对齐方式

字数统计: 157阅读时长: 1 min
2020/04/21

P151 25 组合简写栅格对齐方式

place-content

相当于:justify-content和align-content的组合。

控制栅格空间在容器内的布局。

1
2
3
4
justify-content: space-evenly;
align-content: center;
//相当于 -> 控制行 列
place-content: center space-evenly;

place-items

相当于:justify-items和align-items的组合。

控制元素在栅格空间内的布局。

1
2
3
4
justify-items: start;
align-items: end;
//相当于 -> 控制行 列
place-items: end start;

place-self

相当于:justify-self和align-self的组合。

单独控制元素在栅格空间内的布局。

1
2
3
4
5
6
7
8
div:nth-child(4){
    justify-self: start;
    align-self:center;
}
//相当于 -> 控制行 列
div:nth-child(4){
    place-self: center start;
}
CATALOG