• 코드:
​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: 200px;
11
            height: 300px;
12
            border-radius: 15px;
13
            display: -webkit-flex;
14
            display: flex;
15
            -webkit-flex-wrap: wrap;
16
            flex-wrap: wrap;
17
        }
18
        #space_between {
19
            -webkit-align-content: space-between;
20
            align-content: space-between;
21
        }
22
        #space_around {
23
            -webkit-align-content: space-around;
24
            align-content: space-around;
25
        }
26
        .item {
27
            background-color: darkgray;
28
            border-radius: 10px;
29
            width: 80px;
30
            margin: 10px;
31
            color: white;
32
            font-size: 26px;
33
            text-align: center;
34
            line-height: 50px;
35
        }
36
    </style>
37
</head>
38
​
39
<body>
40
​
41
    <h1>align-content 속성을 이용한 분포 설정</h1>
42
​
43
    <h3>align-content의 속성값이 stretch입니다.</h3>
44
    <div id="stretch" class="flexbox">
45
        <div class="item">1</div>
46
        <div class="item">2</div>
47
        <div class="item">3</div>
48
        <div class="item">4</div>
49
        <div class="item">5</div>
50
        <div class="item">6</div>
51
    </div>
52
    <h3>align-content의 속성값이 space-between입니다.</h3>
53
    <div id="space_between" class="flexbox">
54
        <div class="item">1</div>
55
        <div class="item">2</div>
56
        <div class="item">3</div>
57
        <div class="item">4</div>
58
        <div class="item">5</div>
59
        <div class="item">6</div>
60
    </div>
61
    <h3>align-content의 속성값이 space-around입니다.</h3>
62
    <div id="space_around" class="flexbox">
63
        <div class="item">1</div>
64
        <div class="item">2</div>
65
        <div class="item">3</div>
66
        <div class="item">4</div>
67
        <div class="item">5</div>
68
        <div class="item">6</div>
69
    </div>
70
​
71
</body>
72
​
73
</html>