根据弹性盒子元素所设置的收缩因子作为比率来收缩空间
实例:
<!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(飘零雾雨), [email protected], www.doyoe.com" />
<style>
.flex {
display: -webkit-flex;
width: 400px;
margin: 0;
padding: 0;
list-style: none;
}
.flex li {
width: 200px;
}
.flex li:nth-child(3) {
flex-shrink: 3;
}
</style>
</head>
<body>
<ul class="flex">
<li style=‘background: #F00;‘>a</li>
<li style=‘ background: #0F0;‘>b</li>
<li style=‘background: #00F;‘>c</li>
</ul>
</body>
</html>
分析:
flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3
我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化
通过收缩因子，所以加权综合可得200*1+200*1+200*3=1000px；
于是我们可以计算a,b,c将被移除的溢出量是多少：
a被移除溢出量：(200*1/1000)*200，即约等于40px
b被移除溢出量：(200*1/1000)*200，即约等于40px
c被移除溢出量：(200*3/1000)*200，即约等于120px
最后a,b,c的实际宽度分别为：200-40=160px,
200-40=160px, 200-120=80px
时间： 2024-10-12 15:27:47