前言:在阮大大的flex教程中说:flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。大家会误以为只写flex的效果和flex-grow是完全一样的,实则它们的计算方式是完全不同的,在使用时候要注意,使用正确的放大属性,从而达到自己想要的效果。
1. flex的宽度计算方式是分配 "容器剩余空间+具有flex属性的元素自身尺寸":
举例:在一个width:400px的容器中,有a、b、c 三个width:100px的元素,给a元素flex:2的属性,给b元素flex:1的属性,不给c元素。
计算宽度的规则是:(1)容器剩余空间400px-300px = 100px (2)参具有flex属性的元素自身尺寸100px+100px = 200px (3)求和100px+200px = 300px
把这300px按2:1的比例分给a和b ,最后:a:width:200px ; b:width:100px ; c:width:100px
代码验证:
<style>
.container {
display: flex;
width: 400px;
height: 200px;
background-color: red;
}
.a {
width: 100px;
flex: 2;
background-color: blue;
}
.b {
width: 100px;
flex: 1;
background-color: green;
}
.c {
width: 100px;
background-color: yellow;
}
</style>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
效果如下:
2. flex:grow的宽度计算方式是只分配"容器剩余空间",但是要加上元素自身的尺寸:
举例:还是在一个width:400px的容器中,有a、b、c 三个width:100px的元素,给a元素flex-grow:2的属性,给b元素flex-grow:1的属性,不给c元素。
计算宽度的规则是:(1)容器剩余空间400px-300px = 100px
把这剩余的100px按2:1的比例分给a和b:(2)a:2份+自身宽度100px (3)b:1份+自身宽度100px
最后:a:width:166.7px ; b:width:133.3px ; c:width:100px
代码验证:
<style>
.container {
display: flex;
width: 400px;
height: 200px;
background-color: red;
}
.a {
width: 100px;
flex-grow: 2;
background-color: blue;
}
.b {
width: 100px;
flex-grow: 1;
background-color: green;
}
.c {
width: 100px;
background-color: yellow;
}
</style>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
效果如下:
补充2个剩余空间为0的例子:
1、 在一个width:300px的容器中,有a、b、c 三个width:100px的元素,给a元素flex:3的属性,给b元素flex:2的属性,不给c元素。
计算宽度是:剩余空间0 + 参与flex项目尺寸200px ,按比例给a3份,b2份。
最后:a:width:120px ; b:width:80px ; c:width:100px
2、 在一个width:300px的容器中,有a、b、c 三个width:100px的元素,给a元素flex-grow:3的属性,给b元素flex-grow:2的属性,不给c元素。
计算宽度是:剩余空间0 项目没有可分配的空间,尺度不会发生变化。
最后:a:width:100px ; b:width:100px ; c:width:100px
附:本文参考文章https://blog.csdn.net/weixin_49684995/article/details/107880408