君山 发表于 2021-4-12 15:16:00

CSS Grid 网格布局教程(3容器属性:整个布局的对齐方式)

3.7 justify-content 属性,align-content 属性,place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下)。

.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

这两个属性的写法完全相同,都可以取下面这些值。(下面的图都以justify-content属性为例,align-content属性的图完全一样,只是将水平方向改成垂直方向。)

start - 对齐容器的起始边框。


end - 对齐容器的结束边框。


center - 容器内部居中。


stretch - 项目大小没有指定时,拉伸占据整个网格容器。


space-around - (居中均分) 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。


space-between - (顶边均分) 项目与项目的间隔相等,项目与容器边框之间没有间隔。


space-evenly - (等距均分) 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。



place-content属性是align-content属性和justify-content属性的合并简写形式。

place-content: <align-content> <justify-content>

下面是一个例子。

place-content: space-around space-evenly;
页: [1]
查看完整版本: CSS Grid 网格布局教程(3容器属性:整个布局的对齐方式)