uni-app布局之flex-grow和flex-shrink

我对这两个参数的理解(纯个人理解，可能不准确)

• 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

这样就可以了

参考文章
https://www.runoob.com/cssref/css3-pr-flex-shrink.html