如何删除卡片最后一个元素上的空白

Question

我希望卡片从左到右均匀地分布在页面上。然而，在现阶段，右侧存在巨大差距。我尝试在 CSS 中使用“last-child”类，但没有成功

{% block content %}
<style>

    .card-container {
        display: flex;
    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        height: 25%;
        width: 25vw;
        margin-right: 20px;
        border: 1px solid #ccc;
        height: 250px;
    }

    .card:last-child {
        margin-right: 0;
    }

    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .container {
        padding: 2px 16px;
    }
</style>

<div class="card-container">
    <div class="card">
        <img src="download.png" alt="Statistic" style="width:25%, height:125% ">
        <div class="container">
            <h4><b>Jon Doe</b></h4>
            <p>Architect & Engineer</p>
        </div>
    </div>

    <div class="card">
        <img src="download.png" alt="Statistic" style="width:25%, height:125% ">
        <div class="container">
            <h4><b>Jon Doe</b></h4>
            <p>Architect & Engineer</p>
        </div>
    </div> 
</div>
{% endblock %}

Answer 1

 .card-body {
     flex: 1 1 auto;
     padding: 1rem 1rem;
     display: flex;    
     flex-direction: column;
     justify-content: space-between;

试试这个！