flex项的底部在列中堆叠时被切断

顺晟科技

2021-08-08 11:25:22

我正在用Vue.js和flex box制作一个卡片堆栈，在我的网站上显示各种应用程序。我为每张卡片使用一个组件，并使用VUES的for函数以以下模板HTML呈现卡片:

<div class="card">
    <img src="">
    <h1>Title</h1>
</div>

此组件称为“app-card”。我在以下HTML中呈现卡片:

<div id="app">
    <div class="row">
        <div id="card-container">
            <app-card> <!--Above HTML from template goes here--> </app-card>
        </div>
        <div id="main"></div>
    </div>
</div>

我使用以下SASS（在本例中不包含{}的CSS）作为我的牌组:

*
    margin: 0
    padding: 0 
    font-family: 'Montserrat', sans-serif !important
    box-sizing: border-box

.row
    display: flex
    flex-wrap: wrap
    justify-content: space-evenly
    align-items: auto

#card-container
    flex: 10%

#main
    flex: 90%

.card
    width: 
    margin-top: 0;
    margin-bottom: auto;

.card img 
    width: 
    max-width: 

.card a
    padding: 10px
    background: blue

但是，下一张牌在甲板上的顶部会切掉上面这张牌按钮的底部，如下图所示:

我该怎么解决这个问题？我在使用Bootstrap-4多年后才开始学习flex-box。

顺晟科技：

上一篇：如何使用javascript在单击后下一篇：如何通过`scrollto()`禁用

网站建设

Html

flex项的底部在列中堆叠时被切断