熟练运用flex-grow 与flex-shrink

截屏2021-07-13 上午9.02.18.png

flex-grow：定义项目的的放大比例

    默认为0，即 即使存在剩余空间，也不会放大；
   所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
   flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。

flex-shrink：定义项目的缩小比例

    默认为1，即 如果空间不足，该项目将缩小；
     所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
     flex-shrink为0：空间不足时，该项目不会缩小；
     flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

代码如下:

    <template>
        <view class="mainArea">
            <view class="areaOne">
                <view class="areaOneLeft">
                    了解flex-grow与flex-shrink
                </view>
                <view class="areaOneRight">
                    点击有无反应
                </view>
                
            </view>
            <view class="areaTwo">
                区域2
            </view>
            <view class="arearThree">
                <view   class="leftButton" @click="selectedBtn(0)"   :class="{'activeBtn':selectedNum==0}">
                    左侧按钮
                    
                </view>
                <view class="middleButton" @click="selectedBtn(1)"   :class="{'activeBtn':selectedNum==1}">
                    中间按钮
                    
                </view>
                <view class="rightButton" @click="selectedBtn(2)"    :class="{'activeBtn':selectedNum==2}">
                    右侧按钮
                    
                </view>
            </view>
        </view>
        
</template>
<script>
    export default {
        data() {
            return {
                title: 'Hello',
                selectedNum:0
            }
        },
        onLoad() {

        },
        methods: {
            selectedBtn(a){
            this.selectedNum=a;
         }
        }
    }
</script>

<style>
    
    .mainArea{
    display: flex;  
    flex-direction: column;
    height: 94vh;
    }
   .areaOne{
       background-color: #007AFF;
       height: 35px;
       display: flex;
       flex-direction: row;
    }
    .areaOneLeft{
        width: 100%;
    }
    .areaOneRight{
        flex-shrink: 0;
        text-align: right;
        border: solid 1px #FFFFFF;
    }
    .areaTwo{
       background-color: #4CD964;
       flex-grow: 1;
       text-align: center;
     }
    .arearThree{
        background-color: #999999;
        height: 50px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .arearThree view{
        border: solid  1px #333333;
        padding: 10px;
        flex-grow: 1;
        text-align: center;
    }
    .activeBtn{
        background-color: #007AFF;
        color: #FFFFFF;
    }
    
</style>