x
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>蜜蜂教程(mifengjc.com)</title>6
<style>7
#main {8
width: 350px;9
height: 100px;10
border: 1px solid #c3c3c3;11
display: flex;12
}13
14
#main div {15
flex-grow: 0;16
flex-shrink: 0;17
flex-basis: 40px;18
}19
</style>20
</head>21
<body>22
23
<div id="main">24
<div style="background-color:coral;">红色 DIV</div>25
<div style="background-color:lightblue;" id="myBlueDiv">蓝色 DIV</div>26
</div>27
<p>点击“尝试一下”按钮设置蓝色 div 元素的 flexBasis 属性的值为 "200px"。</p>28
<button onclick="myFunction()">尝试一下</button>29
<script>30
function myFunction() {31
document.getElementById("myBlueDiv").style.flexBasis = "200px";32
}33
</script>34
<p><b>注意：</b>Internet Explorer 和 Safari 不支持 flexBasis 属性。</p>35
36
</body>37
</html>