box-flex属性 - Githubissues

box-flex属性规定框的子元素是否可伸缩尺寸。

可伸缩元素，是指该元素可以随着框的缩小或扩大而缩小或放大。只要框中有多余空间，可伸缩元素就会扩展来填充这些空间。

语法

box-flex: value;

注意：box-flex的value为2的子元素可伸缩大小是value为1的两倍。

 目前浏览器不支持`box-flex`属性

但Firefox支持替代的`-moz-box-flex`属性。

Safari、Opera和Chrome支持替代的`-webkit-box-flex`属性。

示例代码

<! DOCTYPE html>
<html>
<head>
<style>
     div{
     display:-moz-box;  /* Firefox*/
     display:-webkit-box; /*Safari and Chrome*/
    display: box;
    width:300px;
    border:1px solid black;
}

#p1 {
  -moz-box-flex; 1.0;    /* Firefox*/
  -webkit-box-flex:1.0;  /* Safari and Chrome*/
  box-flex:1.0;
  border:1px solid red;
}

#p2{
  -moz-box-flex:2.0; / *Firefox*/
 -webkit-box-flex:2.0; /*Safari and Chrome*/
 box-flex:2.0;
 border:1px solid blue;
}
</style>
</head>

<body>
   <div>
      <p id="p1">Hello</p>
      <p id="p2">World</p>  
  </div>
  <p><b>注释：</b>IE 不支持 box-flex 属性。</p>
</body>
</html>

浏览器显示：

zilongxuan001 / LearnFreecode

box-flex属性 #153