如何消除卡片容器右侧空白间隙，实现卡片水平均匀分布？

你的问题核心在于flex容器的对齐规则和卡片宽度设置，last-child没用是因为它只是去掉了最后一个卡片的右边距，但根本问题是卡片没占满容器可用空间，且容器没配置合适的对齐逻辑。直接按下面的修改调整即可：

关键修改点 #

• 给card-container添加justify-content: space-between，让卡片两端对齐，自动分配中间间隙
• 用gap属性替代margin-right，无需手动处理最后一个卡片的边距，更简洁可靠
• 把卡片的width改成flex: 1，让卡片自动平分容器的可用宽度（可按需加min-width/max-width控制卡片尺寸范围）
• 修正图片内联样式的语法错误（逗号改分号）

修改后的完整代码 #

{% block content %}
<style>

    .card-container {
        display: flex;
        justify-content: space-between; /* 卡片两端对齐，自动均匀分布 */
        gap: 20px; /* 卡片间的固定间隙，替代margin-right */
    }

    .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        flex: 1; /* 自动平分容器宽度 */
        min-width: 200px; /* 可选：防止卡片过窄 */
        max-width: 300px; /* 可选：限制卡片最大宽度 */
        border: 1px solid #ccc;
        height: 250px;
    }

    .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 %}

额外说明 #

• 若想要卡片间隙完全均匀（包括容器两端也有间隙），把justify-content: space-between换成justify-content: space-around即可
• 如果坚持要用固定宽度，需确保所有卡片宽度加间隙的总和等于容器宽度，同时给card-container加width: 100%保证占满父容器

内容的提问来源于stack exchange，提问作者Jadore Thompson