Html 如何将页脚与flexbox底部对齐；卡片；

我有一系列通过FlexBox设置的“卡片”。我有一个页脚，我想添加到每个“钉”自己的底部，每个框（不知道我是否使用了正确的术语）

但是，我希望它钉在底部，无论内容在卡中的长度如何。换句话说，我希望页脚根据行中内容最长的卡片捕捉到底部

希望这把小提琴能解释我的意思。内容最少的卡片的页脚应与内容较多的卡片位于同一位置：

代码如下：

.card-wrapper {
    display: flex;
    justify-content: space-around;
}

.card {
    display: flex;
    flex-direction: column;
    flex: 0 0 30%;
    border: 1px solid #323232;
}

.card-footer {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid #000;
    margin-top: auto;
    align-self: flex-end;
}

---

.card包装器{
显示器：flex；
证明内容：周围的空间；
}
.卡片{
显示器：flex；
弯曲方向：立柱；
弹性：0.30%；
边框：1px实心#323232；
}
.卡*{
宽度：100%；
框大小：边框框；
文本对齐：居中；
}
.卡片页脚{
显示器：flex；
弯曲方向：立柱；
填充：16px；
边框：1px实心#000；
页边顶部：自动；
自对准：柔性端；
}

---

您可以尝试以下代码：

描述：我更新了一个简单的代码，其中告诉

.card content

类显示flex、flex列，并且它在即时父级上的高度为100%。我还删除了一些代码表单

。卡片页脚
对齐self:flex-end属性

实际上，您的代码很好，但您的父级（.card content）与父级的高度不同。我只是解决它


.card包装器{
显示器：flex；
证明内容：周围的空间；
}
.卡片{
显示器：flex；
弯曲方向：立柱；
弹性：0.30%；
边框：1px实心#323232；
}
.卡片内容{
显示器：flex；
弯曲方向：立柱；
身高：100%；
}
.卡片页脚{
显示器：flex；
弯曲方向：立柱；
填充：16px；
边框：1px实心#000；
页边顶部：自动；
}
完美。谢谢
<div class="card-wrapper">
    <a href="#" class="card">
        <div class="card-content">
            <h2>Title</h2>
            <p>Content</p>
            <div class="card-footer">
                <p>Footer</p>
            </div>
        </div>
    </a>
    <a href="#" class="card">
        <div class="card-content">
            <h2>Title</h2>
            <p>Content content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content contentContent content content</p>
            <div class="card-footer">
                <p>Footer</p>
            </div>
        </div>
    </a>
</div>