搭建两行卡片组件时遇到的Flexbox布局问题

问题说明 #

• 评分组件未固定在卡片底部，紧跟副标题显示
• 第3、5张卡片标题有足够空间却自动换行

解决方案（仅使用Flexbox） #

1. 让评分组件固定在卡片底部 #

通过调整卡片和内容区域的Flex属性，将评分组件推至底部：

• 给.card-vertical添加display: flex和flex-direction: column，让卡片内部元素垂直排列
• 设置.card-content为flex: 1，使其占据卡片除图片外的全部剩余空间
• 给.card-rating添加margin-top: auto，强制它靠卡片底部对齐

2. 解决标题换行问题 #

标题换行是因为.card-content设置了固定的67%宽度，导致标题可用空间不足：

• 移除.hebergements-cards .card-content中的width: 67%属性，让内容区域占满卡片宽度
• 若仍有换行问题，可给.card-title添加white-space: nowrap强制单行显示

修改后的完整代码 #

HTML（结构无需改动） #

<div class="hebergements-cards">
  <article class="card-vertical">
    <img src="images/hebergements/nicate-lee.jpg" alt="Image de la chambre d'hôtel montrant deux lits">
    <div class="card-content">
      <div class="card-txt">
        <h3 class="card-title">Auberge Le Panier</h3>
        <p class="card-subtitle">Nuit à partir de 23<span class="euro">€</span></p>
      </div>
      <div class="card-rating">
        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
        <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
        <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
        <span class="sr-only">Note de 4 sur 5</span>
      </div>
    </div>
  </article>
</div>

CSS #

.hebergements-cards {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.hebergements-cards .card-vertical {
    margin-top: 33px;
}

.hebergements-cards .card-content {
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1; /* 占据卡片剩余空间 */
}

.hebergements-cards .card-title {
    margin-top: 10px;
    margin-bottom: 4px;
    /* 可选：强制单行显示 */
    /* white-space: nowrap; */
}

.hebergements-cards .card-subtitle {
    margin: 0;
}

.card-rating {
    margin-bottom: 5px;
    margin-top: auto; /* 推至卡片底部 */
}

.card-vertical {
    background-color: white;
    border-radius: 20px;
    padding: 5px;
    width: 33%;
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
    display: flex; /* 卡片内部垂直排列 */
    flex-direction: column;
}

.card-vertical img {
    border-radius: 20px 20px 0 0;
    width: 100%;
    height: 124px;
    object-fit: cover;
}

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