• 코드:
​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: 250px;
11
            height: 250px;
12
            border-radius: 15px;
13
            display: -webkit-flex;
14
            display: flex;
15
        }
16
        #wrap {
17
            -webkit-flex-wrap: wrap;
18
            flex-wrap: wrap;
19
        }
20
        #wrap_reverse {
21
            -webkit-flex-wrap: wrap-reverse;
22
            flex-wrap: wrap-reverse;
23
        }
24
        .item {
25
            background-color: darkgray;
26
            border-radius: 10px;
27
            width: 80px;
28
            height: 50px;
29
            margin: 10px;
30
            color: white;
31
            font-size: 26px;
32
            text-align: center;
33
            line-height: 50px;
34
        }
35
    </style>
36
</head>
37
​
38
<body>
39
​
40
    <h1>flex-wrap 속성을 이용한 줄 변경 설정</h1>
41
​
42
    <h3>flex-wrap의 속성값이 nowrap입니다.</h3>
43
    <div id="nowrap" class="flexbox">
44
        <div class="item">1</div>
45
        <div class="item">2</div>
46
        <div class="item">3</div>
47
    </div>
48
    <h3>flex-wrap의 속성값이 wrap입니다.</h3>
49
    <div id="wrap" class="flexbox">
50
        <div class="item">1</div>
51
        <div class="item">2</div>
52
        <div class="item">3</div>
53
    </div>
54
    <h3>flex-wrap의 속성값이 wrap-reverse입니다.</h3>
55
    <div id="wrap_reverse" class="flexbox">
56
        <div class="item">1</div>
57
        <div class="item">2</div>
58
        <div class="item">3</div>
59
    </div>
60
​
61
</body>
62
​
63
</html>