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

君山

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

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

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

复制代码

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

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

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

center - 容器内部居中。

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

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

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

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

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

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

复制代码

下面是一个例子。

1. place-content: space-around space-evenly;

复制代码