实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <title>手册网(www.shouce.ren)
6
        </title>
7
        <style>
8
            .Grid {
9
                display: flex;
10
            }
11
            .Grid-cell {
12
                flex: 1;
13
            }
14
            .Grid-cell.u-full {
15
                flex: 0 0 100%;
16
            }
17
            .Grid-cell.u-1of2 {
18
                flex: 0 0 50%;
19
            }
20
            .Grid-cell.u-1of3 {
21
                flex: 0 0 33.3333%;
22
            }
23
            .Grid-cell.u-1of4 {
24
                flex: 0 0 25%;
25
            }
26
        </style>
27
    </head>
28
    <body>
29
        <div class="Grid">
30
            <div class="Grid-cell u-1of4" style="background:red">aaa
31
            </div>
32
            <div class="Grid-cell" style="background:#46b8da">bbb
33
            </div>
34
            <div class="Grid-cell u-1of3" style="background:yellow">ccc
35
            </div>
36
        </div>
37
    </body>
38
</html>
39
​