• 코드:
​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: 150px;
12
            border-radius: 15px;
13
            display: -webkit-flex;
14
            display: flex;
15
        }
16
        #row_reverse {
17
            -webkit-flex-direction: row-reverse;
18
            flex-direction: row-reverse;
19
        }
20
        .item {
21
            background-color: darkgray;
22
            border-radius: 10px;
23
            width: 80px;
24
            height: 50px;
25
            margin: 10px;
26
            color: white;
27
            font-size: 26px;
28
            text-align: center;
29
            line-height: 50px;
30
        }
31
    </style>
32
</head>
33
​
34
<body>
35
​
36
    <h1>flex-direction 속성을 이용한 row 방향 배치</h1>
37
​
38
    <h3>flex-direction의 속성값이 row입니다.</h3>
39
    <div id="row" class="flexbox">
40
        <div class="item">1</div>
41
        <div class="item">2</div>
42
        <div class="item">3</div>
43
    </div>
44
    <h3>flex-direction의 속성값이 row-reverse입니다.</h3>
45
    <div id="row_reverse" class="flexbox">
46
        <div class="item">1</div>
47
        <div class="item">2</div>
48
        <div class="item">3</div>
49
    </div>
50
​
51
</body>
52
​
53
</html>