如何在Tailwind中将元素推至div底部？我的卡片布局实现遇阻

要实现按钮固定在卡片底部，需要针对不同断点的布局调整容器属性，确保flex布局能正确分配空间：

修改要点 #

1. 调整最外层卡片容器的布局：将sm:block改为sm:flex sm:flex-col，让小屏幕以上设备采用垂直flex布局，确保文本区域能占满剩余空间。
2. 给文本区域容器添加高度控制：添加h-full sm:flex-1，在默认grid布局中让文本区域和图片等高，在小屏幕以上让文本区域占满图片下方的剩余空间。
3. 保留文本区域内的flex-1元素，用来撑开内容与按钮之间的空间。

完整代码 #

<div class="grid sm:flex sm:flex-col grid-cols-5 sm:grid-cols-1 col-span-12 sm:col-span-6 md:col-span-4 lg:col-span-3 p-4">
  <div class="flex sm:h-[17em] mr-4 sm:mr-0 sm:mb-4 col-span-2 sm:col-span-1">
    <img class="grow object-cover" :src=''>
  </div>
  <div class="flex flex-col col-span-3 sm:col-span-1 h-full sm:flex-1">
    <p class="mb-3">
      text
    </p>
    <p class="mb-3">
      more text
    </p>
    <div class="flex flex-wrap -mx-1 mb-3">
      some more text
    </div>
    <p class="mb-4 flex-1">
      even more
    </p>
    <button>
      the problem button
    </button>
  </div>
</div>

原理说明 #

• 在默认断点（<sm）的grid布局中，h-full让文本区域与图片区域高度对齐，内部的flex-col配合flex-1元素，将按钮推至文本区域的底部（即卡片右侧的底部）。
• 在sm及以上的垂直flex布局中，sm:flex-1让文本区域占满图片下方的所有剩余空间，flex-col布局下flex-1元素撑开中间空间，按钮固定在整个卡片的底部。

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