在css中,grid布局指的是“网格布局”,是一个二维系统,可以同时处理行和列,可以通过将css规则用于父元素和该元素的子元素来使用网格布局;而flex布局指的是“弹性布局”,是一个一维系统,用来为盒状模型提供最大的灵活性。
(推荐教程:CSS视频教程)
一、flex布局简介
flex是flexible box(弹性布局)的简介,是一个一维系统,用来为盒状模型提供最大的灵活性。
使用:任何容器(行内元素可设置为display:inline-block);
特点:空间分布在行中进行,而非整体
二、grid布局简介
Gird Layout(css网格布局)是css中最强大的布局系统,是一个二维系统,可以同时处理行和列,可以通过将css规则用于父元素(网格容器)和该元素的子元素(网格元素)来使用网格布局。
使用:对父元素设置dispay:grid;grid-template-colums和grid-template-rows来设置几行几列,然后对子元素设置占据几行几列
特点:二维网格结构,十分便于操作
实战一:用grid布局做一个简单的九宫格
html代码:
1
2
3
4
5
6
7
8
9
10
11
css代码:
1
2
3
4
5
6
7
8
9
10
11
12
.box{
width: 1200px;
height: 80vh;
display: grid; // 开启grid布局
grid-template-columns: repeat(3,30%); // 设置列
grid-template-rows: repeat(3,30%); // 设置行
grid-column-gap: 20px; // 设置网格之间的间距
grid-row-gap: 20px; // 设置网格之间的间距
}
.box div{
background-color: #34ce57;
}
实战二:做一个常用的网站布局
html代码:
1
2
3
4
5
6
7
8
9
header
left
center
right
footer
css代码:
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
34
.box {
width: 1200px;
height: 80vh;
display: grid; // 开启grid布局
grid-template-rows: 10% 80% 10%; // 设置行数
}
.header {
background-color: #6ac13c;
display: grid;
/*居中*/
align-content: center;
justify-content: center;
}
.content {
/*background-color: #f1b0b7;*/
display: grid;
grid-template-columns: 10% 80% 10%;
grid-gap: 20px; // 网格之间的间隔
}
.footer {
background-color: #ffc107;
display: grid;
align-items: center;
justify-content: center;
}
.left {
background-color: #5599FF;
}
.center {
background-color: lightgreen;
}
.right {
background-color: orchid;
}