Flex实现栅格布局_flex栅格布局

作者：笔触狂放9 | 2024-03-20 01:07:44

踩

flex栅格布局

文章目录

引导：清除浮动带来的影响
一、flex伸缩（弹性）布局
二、flex伸缩布局的方向
三、水平垂直居中
- 传统布局（回顾）
- flex布局
四、flex换行排列
五、案例：本地宝界面
- 传统浮动实现
- flex布局实现

引导：清除浮动带来的影响

在这里插入图片描述
如果不清除浮动就会带来一系列影响，需要在父盒子里加上overflow：hidden属性（或者其他清除浮动的方式）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        .father{
            border: 1px solid #f00;
            /*overflow: hidden;*/
        }
        .son{
            width: 100px; 
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
    父盒子垮掉了
</body>
</html>
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

下面的栅格布局可以直接排列盒子不带来影响

一、flex伸缩（弹性）布局

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        .father{
            border: 1px solid #f00;
            /* 1. 把父盒子设置成伸缩盒布局
                特征：子元素默认水平排列
            */
            display: flex;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>
</html>
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

二、flex伸缩布局的方向

特征：子元素默认水平排列
竖直flex方向
flex-direction: row;
竖直flex方向
flex-direction: column ;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        .father{
            border: 1px solid #f00;
            /* 1. 把父盒子设置成伸缩盒布局
                特征：子元素默认水平排列
            */
            display: flex;
            /* 2. flex方向 */
            flex-direction: column ;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <span>行内</span>
        <span>行内</span>
    </div>
</body>
</html>
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

三、水平垂直居中

传统布局（回顾）

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        .father{
            border: 1px solid #f00;
            width: 500px;
            height: 500px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
            position: absolute;
            left: 50%;
            top:50%;
            /*margin-left: -50px;*/
            /*margin-top: -50px;*/
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">盒子</div>
    </div>
</body>
</html>
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

flex布局

主轴对其
justify-content: center;
交叉轴对其
align-items: center;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        .father{
            border: 1px solid #f00;
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">盒子</div>
    </div>
</body>
</html>
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

四、flex换行排列

用 flex-wrap: wrap

图例
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            border: 1px solid #f00;
            width: 750px;
            height: 1000px;
            margin: 0 auto;
        }
        .nav{
            display: flex;
            /* 伸缩盒换行 */
            flex-wrap: wrap;
        }
        .item{
            width: 20%;
            height: 100px;
            background-color: pink;
            border:1px solid deepskyblue;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="nav">
            <div class="item">分类</div>
            <div class="item">大聚惠</div>
            <div class="item">苏宁超市</div>
            <div class="item">红孩子母婴</div>
            <div class="item">服装城</div>
            <div class="item">爆款手机</div>
            <div class="item">赚钱</div>
            <div class="item">领云钻</div>
            <div class="item">身边苏宁</div>
            <div class="item">生活家电</div>
        </div>
    </div>
</body>
</html>
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
35
36
37
38
39
40
41
42
43
44
45
46
47

五、案例：本地宝界面

传统浮动实现

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .slider img {
            width: 100%;
            /*width: 375px;*/
        }
        .index-nav ul {
            overflow: hidden;
        }
        .index-nav li {
            width: 33.33333%;
            height: 100px;
            border: 1px solid #ccc;
            text-align: center;
            float: left;
            box-sizing: border-box;
        }
        .index-nav li img {
            width: 40px;
            margin-top: 18px;
        }
        .index-nav li p {
            font-size: 14px;
            color: #333;
        }
        .index-enter {
            height: 200px;
            text-align: center;
            padding-top: 20px;
            font-size: 40px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="slider">
        <img src="assets/images/banner-01.png" alt="">
    </div>
    <div class="index-nav">
        <ul>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-01.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-02.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-03.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-04.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-05.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-06.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-07.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-08.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-09.png" alt="">
                    <p>美食</p>
                </a>
            </li>
        </ul>
    </div>
    <div class="index-enter">
        首页入口
    </div>
</body>
</html>
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

flex布局实现

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .slider img {
            width: 100%;
            /*width: 375px;*/
        }
        .index-nav li{
            width: 33.33333%;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        /*ul是栅格布局*/
        .index-nav ul {
             /* 5. 给当前父元素设置成伸缩盒模式 */
            display: flex;
            /* 6. 设置子元素换行能排列 */
            flex-wrap: wrap;
        }
        /*li里面的元素也是栅格布局*/
        .index-nav li a{
            height: 100px;
            /* 1. 给当前父元素设置成伸缩盒模式 */
            display: flex;
            /* 2. 设置垂直排列 */
            flex-direction: column;
            /* 3.设置主轴居中 */
            justify-content: center;
            /* 4.设置交叉轴居中 */
            align-items: center;
        }
        .index-nav li img {
            width: 40px;
        }
        .index-nav li p {
            font-size: 16px;
            color: #444;
        }
        .index-enter {
            height: 200px;
            text-align: center;
            padding-top: 20px;
            font-size: 40px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="slider">
        <img src="assets/images/banner-01.png" alt="">
    </div>
    <div class="index-nav">
        <ul>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-01.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-02.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-03.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-04.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-05.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-06.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-07.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-08.png" alt="">
                    <p>美食</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="assets/icons/grid-09.png" alt="">
                    <p>美食</p>
                </a>
            </li>
        </ul>
    </div>
    <div class="index-enter">
        首页入口
    </div>
</body>
</html>
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/269557