实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>手册网(www.shouce.ren)</title>
6
<style>
7
#main {
8
    width: 70px;
9
    height: 300px;
10
    border: 1px solid #c3c3c3;
11
    display: -webkit-flex;
12
    display: flex;
13
    -webkit-flex-wrap: wrap;
14
    flex-wrap: wrap;
15
    -webkit-align-content: center;
16
    align-content: center;
17
}
18
​
19
#main div {
20
    width: 70px;
21
    height: 70px;
22
}
23
</style>
24
</head>
25
<body>
26
​
27
<div id="main">
28
  <div style="background-color:coral;"></div>
29
  <div style="background-color:lightblue;"></div>
30
  <div style="background-color:pink;"></div>
31
</div>
32
​
33
<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
34
<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p>
35
​
36
</body>
37
</html>