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

.content-box { display: grid; grid-template-columns: repeat(5, 160px); grid-template-rows: repeat(5, 160px); grid-auto-flow: row; } .box:nth-child(1) { grid-column-start: 1; grid-column-end: 4; } .box:nth-child(2) { grid-column-start: 1; grid-column-end: 4; }

在上图中，1号项目后面的位置是空的，这是因为3号项目默认跟着2号项目，所以会排在2号项目后面。当我们修改设置，设为row dense,表示“先行后列”，并且尽可能精密填满，尽量不出现空格。

.content-box { display: grid; grid-template-columns: repeat(5, auto); grid-template-rows: repeat(5, auto); grid-auto-flow: row dense; /* 避免出现空格 */ } .box:nth-child(1) { grid-column-start: 1; grid-column-end: 4; } .box:nth-child(2) { grid-column-start: 1; grid-column-end: 4; }

上图会先填满第一行，再填满第二行，所以3三号项目就会紧跟在1号项目的后面。

如果将设置改为column dense,表示“先列后行”，并且尽量填满空格。

.content-box { display: grid; grid-template-columns: repeat(5, auto); grid-template-rows: repeat(5, auto); grid-auto-flow: column dense; /* 避免出现空格 */ } .box:nth-child(1) { grid-column-start: 1; grid-column-end: 4; } .box:nth-child(2) { grid-column-start: 1; grid-column-end: 4; }

justify-items属性，align-items属性

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

这两属性的写法完全相同，都可以使用一下属性值。

.content-box { justify-items: start | end | center | stretch; align-items: start | end | center | stretch; }

start：对齐单元格的起始边缘。

单元格的内容左对齐，效果如下图。

.content-box { display: grid; grid-template-columns: repeat(5, 160px); grid-template-rows: repeat(5, 160px); justify-items: start; /* 对齐单元格的起始边缘 */ } .box { width: 100px; height: 100px; }

单元格的内容头部对齐，效果如下图。

.content-box { display: grid; grid-template-columns: repeat(5, 160px); grid-template-rows: repeat(5, 160px); align-items: start; /* 单元格的内容头部对齐 */ } .box { width: 100px; height: 100px; }

end：对齐单元格的结束边缘。

单元格的内容结束边缘对齐，效果如下图。

.content-box { display: grid; grid-template-columns: repeat(5, 160px); grid-template-rows: repeat(5, 160px); justify-items: end; /* 单元格的内容结束边缘对齐 */ } .box { width: 100px; height: 100px; }

center：单元格内部居中。

stretch：拉伸，占满单格的整个宽度（默认值）。

place-items属性

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

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

place-items: start end

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

justify-content属性，align-content属性

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

这两属性的写法完全相同，都可以使用一下属性值。

（编辑：源码网）

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