One, the calculation method of flex-grow
Annotated the flex-basis property
flex-basis:0;
*{
margin: 0;
padding: 0;
}
ul{
width: 600px;
border: 10px yellow solid;
/* 将ul设置为弹性容器 */
display: flex;
/* 设置弹性容器的排列方式 */
margin: 50px;
flex-direction: row;
}
li{
background-color: #bbffaa;
list-style: none;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 50px;
}
/*
flex-grow的初始值为0:
flex-basis没有使用auto以外的属性赋值时，flex-basis默认使用width
可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
600px-300px = 300
可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
300 / 6 = 50
每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))
50 + 50*3 = 250
50 + 50*2 = 150
50 + 50*1 = 100
flex-grow的初始值为0:
flex-basis没有使用auto以外的属性赋值时，flex-basis使用0
可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
600 - 6*0 = 600
可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
600 / 6 = 100
每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))
0 + 100*1 = 100
0 + 100*2 = 200
0 + 100*3 = 300
*/
.first li:nth-child(1){
flex-basis: 0;
flex-grow: 1;
}
.first li:nth-child(2){
flex-basis: 0;
background-color: pink;
flex-grow: 2;
}
.first li:nth-child(3){
flex-basis: 0;
background-color: orange;
flex-grow: 3;
}
/*======== second ==========*/
.second li:nth-child(1){
/* flex-grow: 0; */
}
.second li:nth-child(2){
background-color: pink;
/* flex-grow: 0; */
}
.second li:nth-child(3){
background-color: orange;
/* flex-grow: 0; */
}
Second, the calculation method of flex-shrink
ul{
width: 600px;
border: 10px yellow solid;
/* 将ul设置为弹性容器 */
display: flex;
/* 设置弹性容器的排列方式 */
margin: 50px;
flex-direction: row;
}
li{
background-color: #bbffaa;
list-style: none;
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 50px;
}
/*
flex-shrink初始值为1
每个子元素的原始宽度为300px。
子元素总宽度为900px,因此布局完子元素后超出父元素的宽度为300px=(300px*3-600px)
现在从左至右设置flex-grow的值依次为1，2，3，此时剩余部分空间
按照6(1+2+3)份分割，每份等于300/6=50
第一个元素的宽度为：300-50*1=250
第二个元素的宽度为：300-50*2=200
第三个元素的宽度为：300-50*3=150
1.计算收缩因子与基准值乘的总和
600 + 300*2 = 1200
2.计算收缩因数
收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
1*600 / 1200 = 1/2
1*300 / 1200 = 1/4
3.移除空间的计算
移除空间= 项目收缩因数 x 负溢出的空间
1/2*600 = 300
1/4*600 = 150
600 - 300 = 300
300 - 150 = 150
*/
.first li:nth-child(1){
width: 600px;
}
.first li:nth-child(2){
background-color: pink;
}
.first li:nth-child(3){
background-color: orange;
}
/*======== second ==========*/
.second li:nth-child(1){
flex-shrink: 0;
}
.second li:nth-child(2){
background-color: pink;
flex-shrink: 0;
}
.second li:nth-child(3){
background-color: orange;
flex-shrink: 0;
}