详解css3中dispaly的Grid布局与Flex布局
发布时间：2020-09-26 01:07:30 所属栏目：系统 来源：网络整理
导读：副标题#e# Gird布局与Flex布局有一定的相似性，都是对容器的内部项目进行划分。 Flex布局是轴线布局，只能指定项目针对轴线的位置，可以看作成一维布局 Grid布局则是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以将它看成二维布局。 父
|
.content-box { display: grid; grid-template-columns: 160px 160px 160px 160px 160px; grid-template-rows: 160px 160px 160px 160px 160px; } /*或*/ .content-box { display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%; } 上面代码指定了一个五行五列的网格，列宽和行高都是160px repeat()函数 有时候，重复写同样的值非常麻烦，尤其网格很多时。这时我们可以用repeat()函数，简化重复的值。 repeat()接受两个参数，第一个为重复的次数，第二个为重复的值。 （编辑：源码网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
