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