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