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