Flex布局的示例

Flex布局是很常用的!
主要参考阮一峰的blog
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
css什么不太会…刚刚开始学,如果看到写的很傻的地方求不黑。

示例1:

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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex_eg2</title>
        <link rel="stylesheet" type="text/css" href="flex_eg2.css"/>
    </head>
    <body>
        <div class="Container">
            <div class="Grid">1/2</div>
            <div class="Grid">1/2</div>
        </div>
        <div class="Container">
            <div class="Grid">1/3</div>
            <div class="Grid">1/3</div>
            <div class="Grid">1/3</div>
        </div>
        <div class="Container">
            <div class="Grid">1/4</div>
            <div class="Grid">1/4</div>
            <div class="Grid">1/4</div>
            <div class="Grid">1/4</div>
        </div>
    </body>
    </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    .Container{
        width: 100%;
        height:120px;
        display: flex;
    }

    .Grid{
        background-color:gainsboro;
        border-radius: 10px;
        height: 100px;
        width: 100px;
        margin: 5px;
        text-align: center;/*内部文字水平居中*/
        line-height: 100px;/*内部文字垂直居中 要算一下高度*/
        flex: 1;/*flex的第一个参数是flex-grow,相当于自动扩展*/
    }

最后效果:

示例2:百分比布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>flex_eg3</title>
        <link rel="stylesheet" type="text/css" href="flex_eg3.css"/>
    </head>
    <body>
        <div class="Grid">
            <div class="Grid-cell u-1of2">1/2</div>
            <div class="Grid-cell">auto</div>
            <div class="Grid-cell">auto</div>
        </div>
        <div class="Grid">
            <div class="Grid-cell u-1of4">1/4</div>
            <div class="Grid-cell">auto</div>
            <div class="Grid-cell u-1of3">1/3</div>
        </div>
        <div class="Grid">
            <div class="Grid-cell">auto</div>
            <div class="Grid-cell u-1of3">1/3</div>
        </div>
    </body>
    </html>

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
    *{
        font-family: sans-serif;
    }

    .Grid{
        display: flex;
        border-radius: 10px;
        background-color: bisque;
        width: 100%;
        height:120px;
    }

    /* flow-grow为1 这里都没写宽度,反正是按照比例填满的*/
    /*这个是auto的格子*/
    .Grid-cell{
        background-color:pink;
        border-radius: 10px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        flex:1;
        margin: 5px;
    }

    /* flex前面两个0就代表既不flex-grow也不flex-shrink保持大小不变 */
    /*不管别的怎么变,他就是25%的意思,不知道这么理解对不对哦*/
    .Grid-cell.u-1of4{
        background-color:skyblue;
        border-radius: 10px;
        margin: 5px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        flex: 0 0 25%;
    }

    .Grid-cell.u-1of3{
        background-color:snow;
        border-radius: 10px;
        margin: 5px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        flex: 0 0 33.3333%;
    }

    .Grid-cell.u-1of2{
        background-color:palegreen;
        border-radius: 10px;
        margin: 5px;
        text-align: center;
        line-height: 100px;
        height: 100px;
        flex: 0 0 50%;
    }

最后效果:(把颜色稍微涂一下感觉好多了。。)

示例3:圣杯布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>holygrail</title>
        <link rel="stylesheet" type="text/css" href="holygrail.css"/>
    </head>
    <body>
        <div class="HolyGrail">
            <header>#header</header>
            <div class="HolyGrail-body">
                <div class="HolyGrail-nav">#HolyGrail-nav</div>
                <div class="HolyGrail-content">#HolyGrail-content</div>
                <div class="HolyGrail-ads">#HolyGrail-ads</div>
            </div>
            <footer>#footer</footer>
        </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
    *{
        font-family: sans-serif;
        border-radius: 5px;
    }

    header,footer{
        flex:1;
        background-color: steelblue;
        margin: 5px;
    }

    .HolyGrail{
        display: flex;
        flex-direction: column;
        min-height: 600px;
    }

    .HolyGrail-body{
        display: flex;
        flex:1;
        background-color: whitesmoke;
        min-height: 400px;
    }

    .HolyGrail-nav, .HolyGrail-ads{
        flex:0 0 160px;
        background-color: wheat;
        margin:5px;
    }

    .HolyGrail-content{
        background-color: tomato;
        flex:1;
        margin:5px;
    }

    .HolyGrail-nav{
        order: -1;
    }

最后效果:

示例4:悬挂式布局
这里静态的内容放着只是为了举个栗子。

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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Miao Miao Examples</title>
        <link rel="stylesheet" type="text/css" href="suspend.css"/>
    </head>
    <body>
        <p style="font-weight:bold">MiaoMiao Examples</p>
        <br/>
        <div class="suspend-body">
            <div class="left" style="width: 50%;">
                <div class="suspend-item">
                    <img class = "media-figure" src="cat01.jpg">
                    <div class = "media-body">
                        <p style="font-weight: bold;">Miao Miao Miao Miao</p>
                        <p>Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Mi</p>
                    </div>
                </div>
                <div class="suspend-item" >
                    <img class = "media-figure" src="cat01.jpg">
                    <div class = "media-body">
                        <p style="font-weight: bold;">Miao Miao Miao Miao</p>
                        <p>Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Mi</p>
                    </div>
                </div>
            </div>
            <div class="right" style="width: 50%;">
                <div class="suspend-item">
                    <img class = "media-figure" src="cat01.jpg">
                    <div class = "media-body">
                        <p style="font-weight: bold;">Miao Miao Miao Miao</p>
                        <p>Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao Miao</p>
                    </div>
                </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
    *{
        font-family: sans-serif;
        border-radius: 5px;
    }

    .suspend-body{
        display:flex;
    }

    .left .right{
        display: flex;
        flex-direction: column;
    }

    /*每个悬挂的灰色的那块*/
    /*align-items说明里面的元素贴着上面对齐*/
    .suspend-item{
        flex:1;
        display:flex;
        align-items: flex-start;
        background-color:whitesmoke;
        margin: 10px;
    }

    .media-figure{
        margin: 12px;
        width: 50px;
        height: 50px;
    }

    .media-body{
        flex:1;
        margin:2px
    }

最后效果:

示例5:Sticky Footer
这种做法就是外面是display:flex 然后中间的content是flex:1 上下的header和footer高度固定,这样下面就能一直显示到

《Flex布局的示例》有1个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注