如何实现卡片展开时文本从竖排转为正常显示？

需求：未展开的卡片中文本按竖排（flex-direction: column）排列，点击展开后文本恢复正常横排显示。

完整代码实现 #

HTML #

<div class="row">
  <div class="expanding-cards">
    <div class="expandcard">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Canada</h3>
    </div>
    <div class="expandcard expanded">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Japan</h3>
    </div>
    <div class="expandcard">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Brazil</h3>
    </div>
    <div class="expandcard">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Australia</h3>
    </div>
    <div class="expandcard">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Norway</h3>
    </div>
  </div>
</div>

CSS #

.expanding-cards {
  display: flex;
  width: 100%;
  height: 35vh;
  align-items: stretch;
  flex-direction: row;
  gap: 1rem;
}

/* 卡片基础样式：相对定位、过渡动画 */
.expanding-cards .expandcard {
  width: 0;
  position: relative;
  flex: 1;
  transition: all 0.15s ease-out;
  overflow: hidden;
}

/* 未展开卡片：文本竖排 */
.expanding-cards .expandcard h3 {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  margin: 0;
  padding: 0.5rem;
  color: white;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  z-index: 3000;
}

/* 展开状态的卡片：放大占比 */
.expanding-cards .expandcard.expanded {
  flex: 3;
}

/* 展开后：文本恢复横排 */
.expanding-cards .expandcard.expanded h3 {
  flex-direction: row;
}

.expanding-cards .expandcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

JavaScript #

const cards = document.querySelectorAll('.expandcard');

cards.forEach(card => {
  card.addEventListener('click', () => {
    // 移除所有卡片的展开状态
    cards.forEach(c => c.classList.remove('expanded'));
    // 给当前点击卡片添加展开状态
    card.classList.add('expanded');
  });
});

关键修改说明 #

• 将h3设置为flex容器，未展开时通过flex-direction: column实现文字竖排，展开后切换为flex-direction: row恢复横排；
• 给h3添加绝对定位和半透明背景，确保文字在图片上方清晰显示；
• 修正CSS选择器写法，让样式作用更精准；
• 补充JS逻辑，保证每次仅一个卡片处于展开状态。

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