详解css3中dispaly的Grid布局与Flex布局

.content-box { 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-items属性为例，align-items属性的图完全一样，只是将水平方向改成垂直方向。

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

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

center： 容器内部居中。

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

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

space-between： 项目与项目的间隔相等，项目与容器边框之间没有间隔。

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

place-content属性

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

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

place-content: space-around space-evenly;

如果省略第二个值，浏览器就会假定第二个值等于第一个值。

grid-auto-columns 属性， grid-auto-rows 属性

一、有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!