css3 flex-grow属性设置或检索弹性盒子的扩展比率

原创 国哥笔记  2019-01-25 15:41  阅读 467 views 次

flex-grow属性定义及用法

在css中,flex-grow属性是使用来设置或检索弹性盒子的扩展比率,必须用在弹性盒对象的元素,不然没有效果。

目前,主流浏览器都支持了flex-grow属性,旧版本不支持可以在该属性前加对应的前缀来支持该属性。Internet Explorer 10及更早版本浏览器不支持该属性,Safari 6.1 及更新版本通过-webkit-flex-grow属性支持该属性。

flex-grow属性语法格式

  1. css语法:flex-grow: number/initial/inherit;
  2. JavaScript 语法: object.style.flexGrow="5";

属性值说明

  • number:数字,规定项目将相对于其他灵活的项目进行扩展的量,默认值是 0;
  • initial:设置该属性为它的默认值;
  • inherit:从父元素继承该属性的属性值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 flex-grow属性设置或检索弹性盒子的扩展比率</title>
<style type="text/css">
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>
</body>
</html>

运行结果:

css3 flex-grow属性设置或检索弹性盒子的扩展比率

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-flex-grow.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情