当前位置:网站首页>22-网格布局
22-网格布局
2022-08-11 11:51:00 【CapejasmineY】
文章目录
一、grid布局网格布局的概念和flex布局的区别
含义:它将网页划分成一个个网格,可以任意组合不同的风格,做出各种各样的布局。
区别:Griad布局与Flex布局有一定的相似性,都可以指定容器内部多个项目的位置,但是他们也存在重大区别,Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一堆布局。
Griad布局则是将容器化分成“行”和“列”,产生单元格,然后指定“项目所在的单元格”,可以看作是二维布局,
网格布局案例,不规则布局项目:
二、网格布局中的属性
含义:网格布局中的属性和flex布局中的布局属性类似,分为两类,一类容器属性,一类项目属性。
1、容器属性
(1)触发网格布局
给父元素添加display:griad
display关于网格的取值分为两个,griad(块网格)和inline-griad(行内网格,行内块)
griad表示容器从上向下排列
inline-griad表示容器从左向右排列
(2)行列划分
规定行属性:griad-template-row
规定列属性:griad-template-column
六种取值方式:
方式一:绝对大小
griad-template-row:200px 200px 200px
griad-template-column:200px 200px 200px
方式二:百分比
griad-template-row:33.33% 33.33% 33.33%
griad-template-column:33.33% 33.33% 33.33%
方式三:功能函数
griad-template-row:repeat(3,33.33%)
参数一:重复的次数
参数二:重复的数值
方式四:auto-fill关键字,自动填充,配合功能函数使用
griad-template-row:repeat(auto-fill.33%)
自动填充行数
方式五:fr关键字
griad-template-row:1fr 3fr 1fr;
表示比例关系
方式六:minmax
解释:网格宽度最大200px最小100px,可在区间变化,自适应宽度,如果其他网格大于合适高度,那么会超出父盒子。
第七种方法:auto
自动填满剩余空间
2、间距
//行间距
grid-row-gap:20px
//列间距
grid-column-gap:列间距
//复合式
grid-gap:30px 30px;
3、区域命名与划分 ——设置到父盒子
box{
//前提
display:griad;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
//区域
grid-template-areas:'a e e'
'd e e'
'g h i'
;
}
.box div:nth-child(1){ #box下第一个div盒子占a区域
grid-area:a;
}
注意:合并的区域命名相同,只能实现长方形和正方形。
4、网格排列顺序
排列顺序:
grid-auto-flow: row/column; 改变顺序
# row盒子水平排列
123
456
#column竖直顺序排列
135
246
5、网格对齐方式
(1)网格对齐方式(整体)
网格在大容器中的排列方式
设置在最外部大盒子box上
justify-content:start|end|center|space-between|space-around
align-content:start|end|center|space-between|space-around
//复合属性
place-content:<justify-content> <align-content>
(2)网格内部项目排列位置
设置在最外部大盒子box上
justify-items:start|end|center|stretch;
align-items:start|end|center|stretch;
//复合属性
place-items:<justify-items> <align-items>
stretch默认值,拉伸占满整个盒子
6、行列合并——给网格项目上增加
替代区域命名与划分的方式,直接给内部网格加属性
写法一:
grid-column-start:1;
grid-column-end:3;
表示占一行两列
grid-row-start:1;
grid-row-end:3;
grid-column-start:1;
grid-column-end:3;
表示占两行两列
写法二:
grid-row:1/3;
grid-column:1/3;
网格线:
边栏推荐
猜你喜欢
随机推荐
MySQL --- storage engine
Flutter经验整理
闪灯芯片银行塔闪灯IC参数应用
案例复现,带你分析Priority Blocking Queue比较器异常导致的NPE问题
初始化块(父类优先于子类)
KMP与AC自动机详细讲解(带图)
【学生毕业设计】基于web学生信息管理系统网站的设计与实现(13个页面)
2022 OceanBase 年度发布会:发布四大策略,迈入4.0时代
五分钟教你内网穿透
flutter面试题收集
PG--核心技术--HOT
【数字赛道命题三】基于复旦微FPGA平台实现H.264视频解码
pip安装后仍有ImportError No module named XX问题解决
蚂蚁集团开源密码学基础库 BabaSSL 正式更名“铜锁”
【五一特刊】FPGA零基础学习:IIC协议驱动设计
公共管理学的名词解释
Flutter 教程之 Flutter 中的 HMS 定位工具包
兴盛优选:时序数据如何高效处理?
vending machine
EXCLUSIVE INTERVIEW | INTELLIGENCE IS SPONTANED, NOT PLANNED: Evolution Fan, Former OpenAI Research Manager and UBC Associate Professor Jeff Clune