如何将flex布局div内的按钮对齐到容器底部与图片处于同一水平线

你可以通过给右侧商品信息容器也设置flex垂直布局，再将按钮推到容器底部即可实现需求，修改后的CSS代码如下：

方案1（推荐，灵活性更高） #

.cart-info {
    display: flex;
    flex-wrap: wrap;
    /* 避免左侧图片被拉伸 */
    align-items: flex-start;
    /* 控制图片和文字区的间距，可按需调整数值 */
    gap: 12px;
}

.product-info {
    display: flex;
    flex-direction: column;
    /* 让商品信息容器高度和左侧图片一致，撑满父容器高度 */
    height: 100%;
}

#btn-cart {
    /* 自动将按钮推到容器最底部 */
    margin-top: auto;
}

方案2 #

.cart-info {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.product-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 让内部内容上下两端对齐，按钮自然靠底部 */
    justify-content: space-between;
}

如果不需要响应式换行，可删除.cart-info中的flex-wrap: wrap属性，不影响对齐效果。

内容的提问来源于stack exchange，提问作者Fonz Za