本文摘自PHP中文网,作者小云云,侵删。
很久之前就用过flex布局,觉得很好用,但是由于兼容性,所以并没有经常用,因此在用flex布局的时候应该考虑其兼容性,flex对移动端的兼容性比较高。flex布局是一个网页布局
容器的属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
grid布局很好,但是兼容性现在并不是很好,测试了几个浏览器,支持谷歌、火狐、Opera,不支持safari,IE10以下,360,QQ浏览器
一、网格容器
1.display:grid/grid-inline
2.grid-template-columns和grid-template-rows属性可以显式的设置一个网格的列和行
fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间(就像Flexbox中无单位的值)
1 |
|
minmax()函数来创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数:第一个参数定义网格轨道的最小值,第二个参数定义网格轨道的最大值。可以接受任何长度值,也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压
1 2 |
|
repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数:第一个参数定义网格轨道应该重复的次数,第二个参数定义每个轨道的尺寸。
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 30px repeat(3, 1fr) 30px;
二、间距
1.grid-column-gap 创建列与列之间的间距
2.grid-row-gap 创建行与行之间的间距
3.grid-gap
grid-gap是grid-row-gap和grid-column-gap两个属性的缩写,如果它指定了两个值,那么第一个值是设置grid-row-gap的值,第二个值设置grid-column-gap的值。如果只设置了一个值,表示行和列的间距相等,也就是说grid-row-gap和grid-column-gap的值相同。
三、网格线
1.【grid-row-start】【grid-row-end】【grid-column-start】【grid-column-end】
通过网格线可以定位网格项目。网格线实际上是代表线的开始、结束,两者之间就是网格列或行。每条线是从网格轨道开始,网格的网格线从1开始,每条网格线逐步增加1
1 2 3 4 |
|
2.【grid-row】【grid-column】
grid-row是grid-row-start和grid-row-end的简写。grid-column是grid-column-start和grid-column-end的简写。如果只提供一个值,则指定了grid-row-start(grid-column-start)值;如果提供两个值,第一个值是grid-row-start(grid-column-start)的值,第二个值是grid-row-end(grid-column-end)的值,两者之间必须要用/隔开
grid-row: 2;
grid-column: 3 / 4;
3.关键词span后面紧随数字,表示合并多少个列或行
1 2 |
|
4.【grid-area】指定四个值,第一个值对应grid-row-start,第二个值对应grid-column-start,第三个值对应grid-row-end,第四个值对应grid-column-end
grid-area: 2 / 2 / 3 / 3;
5.网格线命名
分配网格线名称必须用方括号[网格线名称],然后后面紧跟网格轨道的尺寸值。
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
使用repeat()函数可以给网格线分配相同的名称。
1 2 |
|
使用repeat()函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称。相同网格线名称指定网格线的位置和名称,也且会自动在网格线名称后面添加对应的数字,使其网格线名称也是唯一的标识符
使用相同的网格线名称可以设置网格项目的位置。网格线的名称和数字之间需要用空格分开
1 2 |
|
6.网格区域命名
grid-template-areas 引用网格区域名称也可以设置网格项目位置
1 2 |
|
1 |
|
7.grid-auto-flow 网格默认流方向是row,可以通过grid-auto-flow属性把网格流的方向改变成column
grid-auto-flow: column
四、对齐
【网格项目对齐方式(Box Alignment)】
CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式。
【justify-items】
【justify-self】
justify-items和justify-self指定网格项目沿着行轴对齐方式;align-items和align-self指定网格项目沿着列轴对齐方式。
justify-items和align-items应用在网格容器上
【align-items】
【align-self】
align-self和justify-self属性用于网格项目自身对齐方式
这四个属性主要接受以下属性值:
1 |
|
相关推荐:
Flex布局的可伸缩性详解
CSS3中关于Flex布局的详解
CSS使用Grid布局构建网站首页
以上就是Flex布局和Grid布局实例分享的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
浅谈css grid比bootstrap更适合创建布局的原因
浅谈css3 grid网格布局(display: grid)的用法
更多相关阅读请进入《grid》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者