我对这两个参数的理解(纯个人理解，可能不准确)
- flex-grow： 拉伸系数
- flex-shrink：压缩系数
我们先看一段代码
<template>
<view class="content">
<view class="a">A</view>
<view class="a">A</view>
<view class="a">A</view>
<view class="b">B</view>
<view class="b">B</view>
<view class="b">B</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="less">
.content{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100vw;
height: 100vh;
.a{
background-color: #FFFFFF;
margin-left: 5upx;
margin-right: 5upx;
height: 200upx;
color: #333333;
font-size: 50upx;
text-align: center;
line-height: 200upx;
}
.b{
background-color: #9000FF;
margin-left: 5upx;
margin-right: 5upx;
height: 200upx;
color: #333333;
font-size: 50upx;
text-align: center;
line-height: 200upx;
}
}
</style>
img-01.png
一、拉伸系数flex-grow
我们可以看到块级元素默认根据元素大小决定所在区域大小，如果我们希望他们能占满横向区域，并且宽度相同，怎么实现呢？？用到了拉伸系数：flex-grow
我们给A和B元素分别设置flex-grow为一个大于零的整数，我们这里设置为1，意思就是横向的空闲区域被这几个元素均分，注意是：空闲区域
flex-grow: 1;
img-02.png
如果我们添加这样的约束
.a{
flex-grow: 1;
}
.b{
flex-grow: 2;
}
那么B的宽度是不是A的二倍呢？？
img-03.png
可以看到B的宽度比A宽，但是通过测量得知B的宽度并没有达到A的二倍，因为元素中有内容，内容区域不是空闲区域，如果我们将内容去掉
<template>
<view class="content">
<view class="a"></view>
<view class="a"></view>
<view class="a"></view>
<view class="b"></view>
<view class="b"></view>
<view class="b"></view>
</view>
</template>
<style lang="less">
.content{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: #4BB5F7;
width: 100vw;
height: 100vh;
.a{
background-color: #FFFFFF;
margin-left: 20upx;
margin-right: 20upx;
height: 200upx;
color: #333333;
font-size: 50upx;
text-align: center;
line-height: 200upx;
flex-grow: 1;
}
.b{
background-color: #9000FF;
margin-left: 20upx;
margin-right: 20upx;
height: 200upx;
color: #333333;
font-size: 50upx;
text-align: center;
line-height: 200upx;
flex-grow: 2;
}
}
</style>
这个时候B的宽度达到了A宽度的二倍
img-04.png
二、压缩系数flex-shrink
如果我们给A元素和B元素都设置了宽度150upx，我们知道页面宽度为750upx，这个时候理论上是应该显示不全的，看结果
.a{
width: 150upx;
}
.b{
width: 150upx;
}
img-05.png
但是我们看到他们显示完整了，因为有效内容区域是不足以占满横向区域的，默认的空闲区域被等比例压缩了，这个时候就涉及到了flex-shrink
如果我们添加以下约束
.a{
width: 150upx;
flex-shrink: 1;
}
.b{
width: 150upx;
flex-shrink: 2;
}
img-06.png
B元素被压缩的更多，A元素被压缩的比较少，怎么计算呢？
1. 计算一个总量
150 * 1+150 * 1+150 * 1+150 * 2+150 * 2+150 * 2=1350upx
2. A元素需要被压缩：
(150 * 1/1350) * 150=16.67upx
3. B元素需要被压缩：
(150 * 2/1350) * 150=33.33upx
如果我们希望A能完全显示，只压缩B怎么实现呢？？
.a{
......
width: 150upx;
flex-shrink: 0;
}
.b{
......
width: 150upx;
flex-shrink: 2;
}
img-07.png
这样就可以了
