flex-grow
- 默认0，同步放大
- 弹性盒子的扩展比例
- 分配剩余空间的权利
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex-grow</title>
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box{
display:-webkit-flex;
display:flex;
width:600px;
margin:0;
padding:10px;
list-style:none;
background-color:#eee;
}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(2){
-webkit-flex-grow:1;
flex-grow:1;
}
#box li:nth-child(3){
-webkit-flex-grow:2;
flex-grow:2;
}
#box li:nth-child(4) {
-webkit-flex-grow: 2;
flex-grow: 2;
}
</style>
</head>
<body>
<h1>flex-grow示例：</h1>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>
结论：剩余待分配空间为
600px - 5 * 100px = 100px第二个li、第三个li和第四个li会按照1:2:2的比率来分配100px，所以结果5个li的宽度分别为100px,120px,140px,140px,100px,100px;
flex-shrink
- 默认1，同步缩小
- 弹性盒子的缩减比例
- 空间不够时如何收缩空间
例子
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>flex-shrink</title>
<meta name="author" content="" />
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
#flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}
#flex li{width:200px;}
#flex li:nth-child(1){background:#888;}
#flex li:nth-child(2){-webkit-flex-shrink:1;flex-shrink:1;background:#ccc;}
#flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}
</style>
</head>
<body>
<h1>flex-shrink示例：</h1>
<ul id="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
结论：收缩空间为
600px - 400px = 200px第二个li和第三个li会按照1:3的比率来收缩空间，所以3个li的宽度分别为200px,150px,50px;
网友评论