Open MrSeaWave opened 3 years ago
MrSeaWave
commented
3 years ago .item { flex-grow: 0; // 增长比例，子项合计宽度小于容器宽度，需要根据每个子项设置的此属性比例对剩下的长度进行分配 flex-shrink: 1; // 回缩比例，子项合计宽度大于容器宽度，需要根据每个子项设置的此属性比例对多出的长度进行分配 flex-basis: auto; // 设置了宽度跟宽度走，没设置宽度跟内容实际宽度走 }
1.flex-grow: 扩张比率，只有当子集宽度合计小于父级宽度(需要子集扩张)时才看这个值； 2.flex-shrink:收缩比率，只有当子集宽度合计大于父级宽度(需要子集收缩)时才看这个值； 3.flex-base:项目长度，可以自动计算，继承，和设置具体的长度值；
MrSeaWave
commented
3 years ago <div class="parent">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
<style type="text/css">
.parent {
display: flex;
width: 600px;
}
.parent > div {
height: 100px;
}
.item-1 {
width: 140px;
flex: 2 1 0%;
background: blue;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: darkblue;
}
.item-3 {
flex: 1 1 200px;
background: lightblue;
}
</style>
MrSeaWave
commented
3 years ago <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
/* 285 */
flex: 1 2 300px;
background: red;
}
.right {
/* 314 */
flex: 1 1 400px;
background: blue;
}
</style>
</body>
1.先确定看flex-grow还是flex-shrink:父级宽度(600)<子集宽度之和(300+400=700)因此子集需要收缩，收缩比2:1
2. 收缩总量:700-600=100，总权重 300 * 2 + 400 * 1 = 1000
<br />
3. 需要缩小的宽度
<br />
left (300 * 2 / 1000) * 100 = 60<br />
right (400 * 1 / 1000) * 100 = 40<br />
4. 最后的宽度<br />
left 300 - 60 = 240<br />
right 400 - 40 = 360
<br />
</html>
可参考： https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/381
三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为0 1 auto。 1.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 2.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 3.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。