css grid布局和flex布局是什么?

在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;

}