css flex-grow属性怎么用

2024-01-18 09:52 小编
  cssflex-grow属性怎么用?
 
  定义和用法
 
  flex-grow属性用于设置或检索弹性盒子的扩展比率。
 
  注意:如果元素不是弹性盒对象的元素,则flex-grow属性不起作用。
 
  默认值:0
 
  继承:否
 
  可动画化:是。
 
  版本:CSS3
 
  JavaScript语法:
 
  object.style.flexGrow="5"
 
  CSS语法:
 
  flex-grow:number|initial|inherit;
 
  属性值
 
  number一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是0。
 
  initial设置该属性为它的默认值。
 
  inherit从父元素继承该属性。
 
  实例
 
  让第二个元素的宽度为其他元素的三倍:
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <style>
 
  #main{
 
  width:350px;
 
  height:100px;
 
  border:1pxsolid#c3c3c3;
 
  display:flex;
 
  }
 
  #maindiv:nth-of-type(1){flex-grow:1;}
 
  #maindiv:nth-of-type(2){flex-grow:3;}
 
  #maindiv:nth-of-type(3){flex-grow:1;}
 
  #maindiv:nth-of-type(4){flex-grow:1;}
 
  #maindiv:nth-of-type(5){flex-grow:1;}
 
  </style>
 
  </head>
 
  <body>
 
  <divid="main">
 
  <divstyle="background-color:coral;"></div>
 
  <divstyle="background-color:lightblue;"></div>
 
  <divstyle="background-color:khaki;"></div>
 
  <divstyle="background-color:pink;"></div>
 
  <divstyle="background-color:lightgrey;"></div>
 
  </div>
 
  <p><b>注意:</b>InternetExplorer10及更早版本浏览器不支持flex-grow属性。</p>
 
  <p><b>注意:</b>Safari6.1及更新版本通过-webkit-flex-grow属性支持该属性。</p>
 
  </body>
 
  </html>


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码