• 코드:
​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
        #stretch {
17
            -webkit-align-items: stretch;
18
            align-items: stretch;
19
        }
20
        #base {
21
            -webkit-align-items: baseline;
22
            align-items: baseline;
23
        }
24
        .item {
25
            background-color: darkgray;
26
            border-radius: 10px;
27
            width: 80px;
28
            margin: 10px;
29
            color: white;
30
            font-size: 26px;
31
            text-align: center;
32
            line-height: 50px;
33
        }
34
    </style>
35
</head>
36
​
37
<body>
38
​
39
    <h1>align-items 속성을 이용한 수직 정렬</h1>
40
​
41
    <h3>align-items의 속성값이 stretch입니다.</h3>
42
    <div id="stretch" class="flexbox">
43
        <div class="item">1</div>
44
        <div class="item">2</div>
45
        <div class="item">3</div>
46
    </div>
47
    <h3>align-items의 속성값이 baseline입니다.</h3>
48
    <div id="base" class="flexbox">
49
        <div class="item">1</div>
50
        <div class="item">2</div>
51
        <div class="item">3</div>
52
    </div>
53
​
54
</body>
55
​
56
</html>