Flex容器子项标题与描述顶部对齐问题求助

针对你遇到的Flex子项描述无法对齐的问题，直接给每个子卡片内部套垂直Flex布局就能解决，同时保留响应式换行的特性，具体实现如下：

核心思路 #

让每个子项（卡片）本身成为垂直方向的Flex容器，给标题区域设置flex-grow: 1，这样不管标题是1行还是4行，所有卡片的标题区域都会自动撑到相同高度，描述自然就会在同一水平线上对齐。

代码示例 #

HTML

<div class="flex-container">
  <div class="card">
    <h3 class="card-title">短标题</h3>
    <p class="card-desc">这里是描述内容，要和其他卡片的描述顶部对齐</p>
  </div>
  <div class="card">
    <h3 class="card-title">多行标题<br>第二行内容<br>第三行内容</h3>
    <p class="card-desc">这是另一张卡片的描述，顶部必须对齐</p>
  </div>
  <div class="card">
    <h3 class="card-title">最长的标题<br>第二行<br>第三行<br>第四行</h3>
    <p class="card-desc">第三张卡片的描述，确保和前两个对齐</p>
  </div>
</div>

CSS

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 屏幕窄时自动换行 */
  gap: 1.2rem; /* 子项之间的间距 */
}

.card {
  display: flex;
  flex-direction: column; /* 内部垂直排列 */
  flex: 1 1 240px; /* 自适应宽度，最小240px保证换行逻辑 */
  border: 1px solid #eee;
  padding: 1.2rem;
}

.card-title {
  flex-grow: 1; /* 关键：让标题区域填充卡片剩余空间，统一高度 */
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
}

.card-desc {
  margin: 0;
  line-height: 1.6;
  color: #555;
}

为什么这样有效 #

• 外层容器的flex-wrap: wrap保留了你需要的换行功能。
• 每个卡片内部用垂直Flex布局，flex-grow:1让标题区域自动拉伸，不管标题行数多少，所有卡片的标题区域高度都会一致，描述自然就顶对齐了。
• 完全不用硬编码高度，适配内容系统返回的任意1-4行标题。

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