Andrew的博客

practice makes perfect

0%

flex布局

发表于

flex布局，做了3个demo

#垂直水平居中

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        body{
            margin:0px;
        }
        .parent{
            position:absolute;
            background-color: #00a2d4;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .child{
            width: 150px;
            height: 150px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child">
    </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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        body{
            margin:0px;
        }
        .blog{
            position:absolute;
            width: 100%;
            height: 100%;
        }
        .navbar{
            width: 100%;
            height:50px;
            background-color: black;
        }
        .main{
            background-color: lightgoldenrodyellow;
            width: 100%;
            position: absolute;
            top: 50px;
            bottom: 0px;
            /* 水平垂直居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .content{
            width: 90%;
            height: 100%;
            background-color: #00a2d4;
            display: flex;
        }
        .article{
            background-color: chocolate;
            flex: 1;
            flex: 0 0 75%;
        }
        .aside{
            background-color: rebeccapurple;
            flex: 1;
            flex: 0 0 25%;

            display: flex;
            align-items: center;
            flex-direction: column;
        }
        .box{
            background-color: #2D82FF;
            width: 80%;
            margin-top :10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="blog">
    <div class="navbar"></div>
    <div class="main">
        <div class="content">
            <div class="article"></div>
            <div class="aside">
                <div class="box">111111111111111</div>
                <div class="box">222222222222</div>
                <div class="box">33333333333</div>
                <div class="box">4444444444444</div>
                <div class="box">55555555555555</div>
            </div>
        </div>
    </div>
<!--    <div class="footer"></div>-->
</div>
</body>
</html>

#Gird布局

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex布局</title>
    <style type="text/css">
        .Grid{
            display: flex;
        }
        .Grid-cell{
            flex: 1;
        }
        .Grid-cell.u-full{
            flex: 0 0 100%;
        }
        .Grid-cell.u-1of2{
            flex: 0 0 50%;
        }
        .Grid-cell.u-1of3{
            flex: 0 0 33.3333%;
        }
        .Grid-cell.u-1of4{
            flex: 0 0 25%;
        }
    </style>
</head>
<body>
<div class="Grid">
    <div class="Grid-cell u-1of4" style="background-color: #2D82FF">1/4</div>
    <div class="Grid-cell" style="background-color: #6DDA79">auto</div>
    <div class="Grid-cell u-1of3" style="background-color: #46A0CE">1/3</div>
</div>
<p></p>
<div class="Grid">
    <div class="Grid-cell" style="background-color: #2D82FF">auto</div>
    <div class="Grid-cell u-1of3" style="background-color: #6DDA79">1/3</div>
</div>
<p></p>
<div class="Grid">
    <div class="Grid-cell u-1of2" style="background-color: #2D82FF">1/2</div>
    <div class="Grid-cell" style="background-color: #6DDA79">auto</div>
    <div class="Grid-cell" style="background-color: #46A0CE">auto</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
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .HolyGrail {
            display: flex;
            min-height: 100vh;
            flex-direction: column;
        }

        header,
        footer {
            flex: 1;
        }

        .HolyGrail-body {
            display: flex;
            flex: 1;
        }

        .HolyGrail-content {
            flex: 1;
        }

        .HolyGrail-nav, .HolyGrail-ads {
            /* 两个边栏的宽度设为5em */
            flex: 0 0 5em;
        }

        .HolyGrail-nav {
            /* 导航放到最左边 */
            order: -1;
        }
    </style>
</head>
<body>
<body class="HolyGrail">
<header style="background-color: #2D82FF">...</header>
<div class="HolyGrail-body">
    <main class="HolyGrail-content" style="background-color: #6DDA79">...</main>
    <nav class="HolyGrail-nav" style="background-color: yellow">...</nav>
    <aside class="HolyGrail-ads" style="background-color: rebeccapurple">...</aside>
</div>
<footer style="background-color: #2D82FF">...</footer>
</body>
</body>
</html>