• 코드:
​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
        #flex {
9
            background-color: dimgray;
10
            width: 400px;
11
            height: 150px;
12
            border-radius: 15px;
13
            display: -webkit-flex;
14
            display: flex;
15
        }
16
        .item {
17
            background-color: darkgray;
18
            border-radius: 10px;
19
            width: 80px;
20
            height: 50px;
21
            margin: 10px;
22
            color: white;
23
            font-size: 26px;
24
            text-align: center;
25
            line-height: 50px;
26
        }
27
    </style>
28
</head>
29
​
30
<body>
31
​
32
    <h1>플렉스 라인(flex line) - ltr</h1>
33
​
34
    <div id="flex">
35
        <div class="item">1</div>
36
        <div class="item">2</div>
37
        <div class="item">3</div>
38
    </div>
39
​
40
</body>
41
​
42
</html>