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

2026/2/3 17:21:38 来源：https://blog.csdn.net/sinat_31213021/article/details/144379205 浏览: 次关键词：《CSS 知识点》大屏卡片布局思路：弹性布局 flex-grow

思路

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

使用弹性布局和属性 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>