• 코드:
​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: 500px;
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
        .item {
19
            background-color: darkgray;
20
            border-radius: 10px;
21
            width: 80px;
22
            margin: 10px;
23
            color: white;
24
            font-size: 26px;
25
            text-align: center;
26
            line-height: 50px;
27
        }
28
        .item:nth-child(2) {
29
            -webkit-align-self: flex-start;
30
            align-self: flex-start;
31
        }
32
        .item:nth-child(3) {
33
            -webkit-align-self: flex-end;
34
            align-self: flex-end;
35
        }
36
        .item:nth-child(4) {
37
            -webkit-align-self: center;
38
            align-self: center;
39
        }
40
        .item:nth-child(5) {
41
            -webkit-align-self: baseline;
42
            align-self: baseline;
43
        }
44
    </style>
45
</head>
46
​
47
<body>
48
​
49
    <h1>align 속성을 이용한 플렉스 요소의 정렬 설정</h1>
50
​
51
    <div class="flexbox">
52
        <div class="item">1</div>
53
        <div class="item">2</div>
54
        <div class="item">3</div>
55
        <div class="item">4</div>
56
        <div class="item">5</div>
57
    </div>
58
​
59
</body>
60
​
61
</html>