如何实现Flex布局下卡片描述文本与长标题卡片对齐？

当Flex布局的卡片组中某张卡片的标题文本过长时，其他卡片的描述文本无法与长标题卡片的描述文本处于同一水平线，以下是两种可行的解决方案：

原始代码 #

CSS #

.card-container {
  display: flex;
  gap: 1rem;
}

.card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.name {
  font-size: 2rem;
}

.card img {
  width: 100%;
}

HTML #

<body>
  <div class="card-container">
    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="p1 (2).jpg" alt="" />
        </div>
        <h3 class="card-header">
          Adventure Tours Adventure ToursAdventure ToursAdventure Adventure Tours Adventure ToursAdventure ToursAdventure
        </h3>
        <p class="card-description">
          Experience the thrill of a lifetime with our adventure tours. From hiking through breathtaking mountain ranges to conquering raging whitewater rapids, our expert guides will take you on unforgettable journeys filled with excitement and discovery.
        </p>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="p1 (2).jpg" alt="" />
        </div>

        <h3 class="card-header">Wilderness Retreats</h3>
        <p class="card-description">
          Escape the hustle and bustle of everyday life and immerse yourself in the tranquility of nature with our wilderness retreats. Unplug from technology, reconnect with yourself, and find serenity in the beauty of pristine landscapes and peaceful surroundings
        </p>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="card-content__img">
          <img src="p1 (2).jpg" alt="" />
        </div>

        <h3 class="card-header">Nature Photography Workshops</h3>
        <p class="card-description">
          Capture the stunning beauty of the natural world with our nature photography workshops. Learn from professional photographers, hone your skills, and explore picturesque locations as you develop a deeper connection with nature and create breathtaking images
          to cherish forever.
        </p>
      </div>
    </div>
  </div>
</body>

解决方案1：Flex子元素垂直布局并分配空间 #

修改CSS，让卡片内部内容垂直排列，强制标题区域占据剩余高度：

.card-container {
  display: flex;
  gap: 1rem;
}

.card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-content {
  /* 让卡片内部元素垂直排列，并撑满卡片高度 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  /* 让标题区域占据图片和描述之间的所有剩余空间 */
  flex-grow: 1;
}

.name {
  font-size: 2rem;
}

.card img {
  width: 100%;
}

原理：通过flex-grow:1让所有卡片的标题区域高度统一，无论标题长短都会填满剩余垂直空间，从而让下方的描述文本自动对齐。

解决方案2：改用Grid布局实现更精准的对齐 #

如果更倾向于Grid布局，也可以用以下方式实现：

.card-container {
  /* 用Grid实现响应式卡片组，自动适配宽度 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-content {
  /* 将卡片内容分为三行：图片（自适应高度）、标题（占满剩余空间）、描述（自适应高度） */
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.5rem;
  height: 100%;
}

.card-header {
  font-size: 1.2rem;
  font-weight: bold;
}

.name {
  font-size: 2rem;
}

.card img {
  width: 100%;
}

原理：Grid的grid-template-rows明确分配了每行的空间占比，标题行的1fr会强制所有卡片的标题区域高度一致，确保描述文本处于同一水平线。

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