CSS Grid 网格布局教程(3容器属性:单元格对齐模式)

君山

3.6 justify-items 属性，align-items 属性，place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

1. .container {
   
2.   justify-items: start | end | center | stretch;
   
3.   align-items: start | end | center | stretch;
   
4. }

复制代码

这两个属性的写法完全相同，都可以取下面这些值。

start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。

1. .container {
   
2.   justify-items: start;
   
3. }

复制代码

上面代码表示，单元格的内容左对齐，效果如下图。

1. .container {
   
2.   align-items: start;
   
3. }

复制代码

上面代码表示，单元格的内容头部对齐，效果如下图。



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

1. place-items: <align-items> <justify-items>;

复制代码

下面是一个例子。

1. place-items: start end;

复制代码

如果省略第二个值，则浏览器认为与第一个值相等。