详解css3中dispaly的Grid布局与Flex布局
发布时间：2020-09-25 11:34:39 所属栏目：站长百科 来源：网络整理
导读：副标题#e# Gird布局与Flex布局有一定的相似性，都是对容器的内部项目进行划分。 Flex布局是轴线布局，只能指定项目针对轴线的位置，可以看作成一维布局 Grid布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以将它看成二维布局。 父
|
.content-box { display: grid; grid-template-columns: repeat(5, 160px); grid-template-rows: repeat(5, 160px); } .box:nth-child(1) { grid-row-start: 3; /* 上边框是第三根水平网格线 */ grid-column-start: 5; /* 左边框是第五根垂直网格线 */ } 除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。我们可以把这个属性的值分别改成column、row dense和column dense，看看其他项目的位置发生了怎样的变化。 二、指定四个边框位置的效果图 （编辑：成都站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |