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