Style flexBasis 属性

Style 对象参考手册 Style 对象

设置一个灵活项目的初始长度为 200 像素：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <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>
  <script>
    function myFunction() {
      document.getElementById("myBlueDiv").style.flexBasis = "200px";
    }
  </script>
  <p><b>注意：</b>Internet Explorer 和 Safari 不支持 flexBasis 属性。</p>

</body>
</html>

尝试一下 »

定义和用法

flexBasis 属性规定灵活项目的初始长度。

注意：如果元素不是灵活的项目，则 flexBasis 属性不起作用。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Firefox、Opera 和 Chrome 支持 flexBasis 属性。

语法

返回 flexBasis 属性：

object.style.flexBasis

设置 flexBasis 属性：

object.style.flexBasis = "number|auto|initial|inherit"

属性值

值 描述
number 一个长度单位或者一个百分比，规定灵活项目的初始长度。
auto 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

技术细节

默认值： auto
返回值： 字符串，表示元素的 flex-basis 属性。
CSS 版本 CSS3

相关文章

CSS 参考手册：flex-basis 属性

HTML DOM STYLE 参考手册：flex 属性

HTML DOM STYLE 参考手册：flexDirection 属性

HTML DOM STYLE 参考手册：flexFlow 属性

HTML DOM STYLE 参考手册：flexGrow 属性

HTML DOM STYLE 参考手册：flexShrink 属性

HTML DOM STYLE 参考手册：flexWrap 属性

Style 对象参考手册 Style 对象