HTML/CSS使用flexbox水平排布div时调整price位置的问题

你的布局问题核心是.cart__item__desc的Flex排列方向配置错误，默认横向排列导致商品名称、价格并排显示，修改3处CSS属性即可实现目标效果：

• 修改.cart__item__desc样式，添加flex-direction: column，让内部名称、价格两个子块从上到下纵向排列
• 给.cart__item__price添加margin-top: auto，Flex布局中该属性会自动占满元素上方的所有剩余空间，直接把价格块推到描述区域的底部
• 给最外层.cart__itemwraper设置固定高度（数值按你的设计稿需求调整即可），避免容器被内容自适应撑开后，底部对齐效果无法正常展示

修改后的完整CSS代码如下：

.cart__itemwraper{
   width: 100%;
   display: flex;
   height: 160px; /* 可根据实际设计调整高度值 */
}

.cart__item__image {
    width: 20%;
    background-color: red;
}

.cart__item__desc {
    width: 40%;
    display: flex;
    flex-direction: column; /* 切换为纵向排列子元素 */
    background-color: #814ce4;
}

.cart__item__name {
    background-color: greenyellow;
    width: 100%;
}
.cart__item__price {
    width: 100%;
    background-color: #e44caa;
    display: flex;
    align-items: flex-end;
    margin-top: auto; /* 将元素推至容器底部 */
}

.cart__item__counter{
    width: 40%;
    background-color: yellow;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

修改完成后，商品名称会固定显示在描述区域顶部，价格块会贴合在描述区域底部，和右侧计数器的底部保持齐平，和你标注的目标位置完全一致。

补充提示：如果不想给外层容器设置固定高度，保留Flex容器默认的align-items: stretch属性即可，外层容器会自动和高度最高的子元素（比如商品图片块）保持等高，价格块同样会自动对齐到整个购物车商品项的底部。

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