实例代码“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: 1;}
14
#main div:nth-of-type(3) {flex-grow: 1;}
15
</style>
16
</head>
17
<body>
18
​
19
<div id="main">
20
  <div style="background-color:coral;"></div>
21
  <div style="background-color:lightblue;" id="myBlueDiv"></div>
22
  <div style="background-color:khaki;"></div>
23
</div>
24
​
25
<p>点击“运行”按钮设置蓝色 div 元素的 flexGrow 属性的值为 "5"。</p>
26
​
27
<button onclick="myFunction()">运行</button>
28
​
29
<script>
30
function myFunction()
31
{
32
document.getElementById("myBlueDiv").style.flexGrow = "5";
33
}
34
</script>
35
​
36
<p><b>注意：</b>Internet Explorer 和 Safari 不支持 flexGrow 属性。</p>
37
​
38
</body>
39
</html>