《CSS 知识点》大屏卡片布局思路：弹性布局 flex-grow

news2025/11/4 14:09:38

思路

大屏左右两侧高宽一致，内部卡片可按比例设置！

使用弹性布局和属性 flex-grow 设置比例；
间隔使用 margin-bottom 设置，最后一个卡片不设置；

效果如图

在这里插入图片描述

代码说明

CSS代码 26 - 30，左右两侧设置弹性布局；
CSS代码 34 - 40，设置卡片直接的间隔，最后一个不设置；
Html代码 4 - 6,9 - 11，设置卡片比例；

<template>
    <div class="scrollbar-main">
        <div class="left-cards">
            <div style="flex-grow: 3;"></div>
            <div style="flex-grow: 2;" ></div>
            <div style="flex-grow: 5;" ></div>
        </div>
        <div class="right-cards">
            <div style="flex-grow: 2;"></div>
            <div style="flex-grow: 1;" ></div>
            <div style="flex-grow: 1;" ></div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.scrollbar-main {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    .left-cards,
    .right-cards {
        position: absolute;
        top: 10px;
        bottom: 10px;
        display: inline-flex;
        flex-direction: column;
        width: 350px;
        overflow: auto;
        background: #ccc;
        >div{
            background: #999;
            margin-bottom: 10px;
        }
        >div:last-child{
            margin-bottom: 0;
        }
    }
    .left-cards {
        left: 10px;
    }
    .right-cards {
        right: 10px;
    }
}
</style>