使用Flexbox实现卡片底部按钮固定的问题求助

针对多列布局下卡片因标题换行导致底部按钮、字数元素无法对齐的问题，只需通过Flexbox调整卡片及内容区域的布局即可解决，无需修改HTML结构：

修改后的完整CSS代码 #

.article-card {
    margin-top: 30px;
    background-color: rgb(255, 255, 255);
    box-shadow: 5px 5px 20px rgb(207, 207, 207);
    /* 设置卡片为垂直弹性容器，强制占满父容器高度 */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.article-card__image {
    max-width: 100%;
    height: fit-content;
}

.article-card__content {
    padding: 0px 20px 20px 20px;
    /* 让内容区域填充图片下方剩余空间，并设置垂直弹性布局 */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-card__content__header {
    padding: 40px 0px 25px 0px;
}

.article-card__content__buttons {
    display: flex;
    flex-direction: row;
    /* 自动推到底部，保留顶部间距避免紧贴段落 */
    margin-top: auto;
    padding-top: 25px;
    width: 100%;
}

.article-card__content__buttons > p {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.article-card__content__buttons__read-button,
.article-card__content__buttons__share-button {
    background-color: rgb(255, 255, 255);
    padding: 5px;
    margin: 0px 5px;
    border: 1px black solid;
    border-radius: 4px;
}

.article-card__content__buttons__read-button:hover,
.article-card__content__buttons__share-button:hover {
    background-color: blue;
    color: white;
}

关键修改说明 #

1. 卡片容器设置：给.article-card添加垂直Flex布局和height: 100%，确保多列布局中所有卡片高度一致，内部元素按垂直方向分配空间。
2. 内容区域弹性化：.article-card__content设置flex:1和垂直Flex布局，自动填充图片下方的剩余空间，为内部元素布局提供弹性基础。
3. 底部元素自动对齐：.article-card__content__buttons用margin-top: auto替代原有的固定padding，利用Flexbox自动margin特性，无论标题、段落高度如何变化，按钮区都会被推到内容区域底部。

该方案完全基于CSS Flexbox实现，无需JavaScript，适配所有现代浏览器，完美解决多列场景下的卡片底部元素对齐问题。

内容的提问来源于stack exchange，提问作者Rasmus Krogh-Andersen