[ css 弹性盒子模型 flex-grow 属性 ] 弹性盒子模型flex布局中flex-grow属性讲解及实例演示的区别
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
实例:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>-webkit-flex-basis_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.flex {
display: -webkit-flex;
width: 600px;
margin: 0;
padding: 0;
list-style: none;
}
.flex li:nth-child(1) {
width: 200px;
background: #F00;
}
.flex li:nth-child(2) {
flex-grow: 1;
width: 50px;
background: #0F0;
}
.flex li:nth-child(3) {
flex-grow: 3;
width: 50px;
background: #00F;
}
</style>
</head>
<body>
<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
解析:
-
-
flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3
flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：
a: 50+(300/4)=200px //如果没有显示定义该属性，是不会拥有分配剩余空间权利的
b: 50+(300* 1/4 )=125px
a: 50+(300* 3/4 )=275px
-
