Style flexBasis 属性 详解
css3基础 2023-07-30 02:28:37小码哥的IT人生shichen
Style flexBasis 属性
实例
将弹性项目的初始长度设置为 200 像素：
document.getElementById("myBlueDiv").style.flexBasis = "200px";完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色 DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">蓝色 DIV</div>
</div>
<p>请点击“试一试”按钮，将蓝色 div 元素的 flexBasis 属性值设置为 “200px”。</p>
<button onclick="myFunction()">试一试</button>
<p><b>注释：</b>Internet Explorer 10 及更早版本不支持 flexBasis 属性。</p>
<script>
function myFunction() {
document.getElementById("myBlueDiv").style.flexBasis = "200px";
}
</script>
</body>
</html>可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
返回 flexBasis 属性：
object.style.flexBasis设置 flexBasis 属性：
object.style.flexBasis = "number|auto|initial|inherit"属性值
| 值 | 描述 |
|---|---|
| number | 规定弹性项目的初始长度，长度单位或百分比。 |
| auto |
默认值。长度等于弹性项目的长度。 如果项目没有规定长度，长度取决于其内容。 |
| initial | 将此属性设置为其默认值。请参阅 initial。 |
| inherit | 从其父元素继承此属性。请参阅 inherit。 |
技术细节
| 默认值： | auto |
|---|---|
| 返回值： | 字符串，表示元素的 flex-basis 属性。 |
| CSS 版本： | CSS3 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 11.0 | 支持 | 9.0 | 支持 |
相关页面
HTML DOM STYLE 参考手册：flex 属性
HTML DOM STYLE 参考手册：flexDirection 属性
HTML DOM STYLE 参考手册：flexFlow 属性
HTML DOM STYLE 参考手册：flexGrow 属性
HTML DOM STYLE 参考手册：flexShrink 属性
HTML DOM STYLE 参考手册：flexWrap 属性
