如何在Tailwind CSS中垂直对齐不同高度的多张卡片

假设你要实现的是「左侧固定区域+右侧自适应内容，整体垂直居中」的绿色卡片效果，以下是可用的Tailwind代码实现：

<div class="flex items-center bg-green-50 p-4 rounded-lg">
  <!-- 左侧固定宽度元素（比如图标/缩略图） -->
  <div class="w-16 h-16 bg-green-200 rounded-full flex items-center justify-center mr-4">
    <span class="text-green-800 text-xl">📌</span>
  </div>
  <!-- 右侧自适应内容区域 -->
  <div class="flex-1">
    <h3 class="font-bold text-green-900 mb-1">卡片标题</h3>
    <p class="text-green-700">这里是卡片的详细描述内容，会自动占据剩余宽度，换行也不会影响左侧区域</p>
  </div>
</div>

关键类说明： #

• flex：开启flex布局
• items-center：让子元素在垂直方向居中对齐
• flex-1：给右侧内容区域设置弹性增长，占据剩余可用宽度
• mr-4：给左侧元素设置右侧间距，避免内容紧贴

如果你的需求是垂直方向的flex布局（比如标题在上，内容在下，底部固定按钮），可以用这个实现：

<div class="flex flex-col bg-green-50 p-4 rounded-lg h-64">
  <div class="flex-1">
    <h3 class="font-bold text-green-900 mb-2">垂直布局卡片标题</h3>
    <p class="text-green-700">内容区域会自动填充除了底部按钮外的剩余空间</p>
  </div>
  <button class="mt-auto bg-green-600 text-white px-4 py-2 rounded">操作按钮</button>
</div>

这个布局的关键： #

• flex-col：将flex方向改为垂直
• flex-1：让内容区域占据垂直方向的剩余空间
• mt-auto：让按钮自动推到容器底部

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