在 Tailwind CSS 中讓 div 填滿父 div 的剩餘高度

Question

我想把 K 放在卡片中間，但我該怎麼做呢？ 我嘗試將 items-center 放入第二個 div 不起作用，因為第二個 div 只是字母 K 的高度

<div class="bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my -10">
  <div class="flex justify-end p-2">
    <svg>
    </svg>
  </div>
  <div class="bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

Answer 1

你的問題顯然不清楚。讓我為您提供完成任務的各種可能性。

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-transparent">
    <div class="h-min w-full bg-slate-200 text-center text-5xl font-bold">k</div>
  </div>
</div>

---

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-slate-200 text-5xl font-bold">k</div>
</div>

---

<div class="relative mx-10 my-10 h-48 w-48 rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="absolute right-0">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full items-center justify-center bg-transparent">
    <div class="flex h-min bg-slate-200 text-5xl font-bold">k</div>
  </div>
</div>

---

---

<div class="mx-10 my-10 flex h-48 w-48 flex-col rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="flex justify-end p-2">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full flex-1 items-center justify-center bg-slate-200 text-center text-5xl font-bold">k</div>
</div>

---

<div class="mx-10 my-10 flex h-48 w-48 flex-col rounded-md bg-orange-200 shadow-md hover:shadow-lg">
  <div class="flex justify-end p-2">
    <img class="h-8 w-8" src="https://cdn-icons-png.flaticon.com/512/1214/1214428.png" />
  </div>
  <div class="flex h-full flex-1 items-center justify-center bg-transparent"><div class="w-full bg-slate-200 text-center text-5xl font-bold">k</div></div>
</div>

Answer 2

這種類型的佈局使用網格更容易預測。因為 flex 會嘗試填充可用空間的大小，而 grid 不會。

我舉了兩個例子，一個完全居中，無論圖示如何，另一個考慮圖示的位置和大小。

https://play.tai​​lwindcss.com/6M290nY1NT

<!-- this is your example -->
<div class="bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class="flex justify-end p-2">
    <svg>
    </svg>
  </div>
  <div class="bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

<!-- fully centered -->
<div class="grid items-center bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class="[grid-area:1/1] self-start justify-self-end h-4 w-4 bg-black">
    <svg>
    </svg>
  </div>
  <div class="[grid-area:1/1] bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>

<!-- kinda centered -->
<div class="grid items-center [grid-template-rows:auto_1fr] bg-orange-200 w-48 h-48 shadow-md rounded-md hover:shadow-lg mx-10 my-10">  
  <div class=" justify-self-end h-4 w-4 bg-black">
    <svg>
    </svg>
  </div>
  <div class=" bg-slate-200 flex justify-center items-center text-5xl font-bold">
        k
  </div>
</div>