• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Flexible Box Layout</title>
7
    <style>
8
        .flexbox {
9
            background-color: dimgray;
10
            width: 400px;
11
            height: 250px;
12
            border-radius: 15px;
13
            display: -webkit-flex;
14
            display: flex;
15
        }
16
        .item {
17
            background-color: darkgray;
18
            border-radius: 10px;
19
            margin: 10px;
20
            color: white;
21
            font-size: 26px;
22
            text-align: center;
23
            line-height: 50px;
24
        }
25
        .item:nth-child(1) {
26
            -webkit-flex: 3;
27
            flex: 3;
28
        }
29
        .item:nth-child(2) {
30
            -webkit-flex: 1;
31
            flex: 1;
32
        }
33
        .item:nth-child(3) {
34
            -webkit-flex: 1;
35
            flex: 1;
36
        }
37
    </style>
38
</head>
39
​
40
<body>
41
​
42
    <h1>flex 속성을 이용한 플렉스 요소의 크기 설정</h1>
43
​
44
    <div class="flexbox">
45
        <div class="item">1</div>
46
        <div class="item">2</div>
47
        <div class="item">3</div>
48
    </div>
49
​
50
</body>
51
​
52
</html>