《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>

flex-grow

W3school flex-grow