實作 Card | 點燈坊

Card 為目前很流行 Layout，因為可針對不同 Device 寬度輕易 RWD 改變。

Version

Tailwind CSS 2.0.3

flex-grow

card000

Image 與 author 為固定部分，主要 title 內容長度可變，希望 author 部分能永遠垂直靠下。

<template>
  <div class="w-11/12 m-auto flex flex-wrap">
    <div class="w-72 mx-auto border border-solid border-red-600 flex flex-col">
      <div>
        <img class="w-full" src="https://picsum.photos/300/200/?random=10">
      </div>
      <h3 class="font-medium text-lg flex-grow">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </h3>
      <div>
        Sam
      </div>
    </div>
    <div class="w-72 mx-auto border border-solid border-red-600 flex flex-col">
      <div>
        <img class="w-full" src="https://picsum.photos/300/200/?random=11">
      </div>
      <h3 class="font-medium text-lg flex-grow">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, quisquam, sapiente?
      </h3>
      <div>
        Sam
      </div>
    </div>
    <div class="w-72 mx-auto border border-solid border-red-600 flex flex-col">
      <div>
        <img class="w-full" src="https://picsum.photos/300/200/?random=12">
      </div>
      <h3 class="font-medium text-lg flex-grow">
        Lorem ipsum dolor sit amet.
      </h3>
      <div>
        Sam
      </div>
    </div>
  </div>
</template>

第 2 行

<div class="w-11/12 m-auto flex flex-wrap">

設定父層 box style：

w-11/12：設定父層 box width
m-auto：設定自動調整左右 margin 而水平置中
flex：為了讓 card 能橫排且等高，設定 card 使用 Flexbox 排列
flex-wrap：RWD 自動換列

第 3 行

<div class="w-72 mx-auto border border-solid border-red-600 flex flex-col">

設定子層 card style：

w-72：設定 card width
mx-auto：設定 card margin 自動調整
border：設定 card border width
border-solid：設定 card border style
border-red-600：設定 card border 顏色
flex：因為 title 內容長度可變，這會造成 author 位置不是垂直置中，打算使用 flex-grow 讓 title 獨佔剩餘高度，因此出現兩層 Flexbox
flex-col：由於 card 內容是垂直方向，因此更改其 flex-direction 為 column

第 5 行

<img class="w-full" src="https://picsum.photos/300/200/?random=10">

設定 card 底下 img style：

w-full：設定圖片與父層 card 同寬

18 行

<h3 class="font-medium text-lg flex-grow">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, quisquam, sapiente?
</h3>

設定 card 底下 title style：

font-medium：設定 card title 的 font weight
text-lg：設定 card title 的 font size
flex-grow：由於 title 內容不定，這導致 author 位置會隨 title 內容而變，因此將 title 設定為 flex-grow 佔據 card 剩餘高度，這也是本文最關鍵之處

mb-auto

card001

Image 與 author 為固定部分，主要 title 內容長度可變，希望 author 部分能永遠垂直靠下。

<template>
  <div class="w-11/12 m-auto flex flex-wrap">
    <div class="w-72 mx-auto border border-solid border-red-600 flex flex-col">
      <div>
        <img class="w-full" src="https://picsum.photos/300/200/?random=10">
      </div>
      <h3 class="font-medium text-lg mb-auto">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </h3>
      <div>
        Sam
      </div>
    </div>
    <div class="w-72 mx-auto border border-solid border-red-600 flex flex-col">
      <div>
        <img class="w-full" src="https://picsum.photos/300/200/?random=11">
      </div>
      <h3 class="font-medium text-lg mb-auto">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, quisquam, sapiente?
      </h3>
      <div>
        Sam
      </div>
    </div>
    <div class="w-72 mx-auto border border-solid border-red-600 flex flex-col">
      <div>
        <img class="w-full" src="https://picsum.photos/300/200/?random=12">
      </div>
      <h3 class="font-medium text-lg mb-auto">
        Lorem ipsum dolor sit amet.
      </h3>
      <div>
        Sam
      </div>
    </div>
  </div>
</template>

第 7 行

<h3 class="font-medium text-lg mb-auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</h3>

設定 card 底下 title style：

mb-auto：由於 card 高度因為 Flexbox 而等高，因此也可藉由自動調整 title 的 bottom margin 而達到相同效果

雖然 flex-grow 與 mb-auto 最後結果相同，但藉由 Pesticide 仍可發現兩者不同，flex-grow 是藉由自動調整 title 高度讓 author 垂置靠下；而 mb-auto 是靠自動調整 title margin 讓 author 垂直靠下

mt-auto

card002

Image 與 author 為固定部分，主要 title 內容長度可變，希望 author 部分能永遠垂直靠下。

<template>
  <div class="w-11/12 m-auto flex flex-wrap">
    <div class="w-72 mx-auto border border-solid border-red-600 flex flex-col">
      <div>
        <img class="w-full" src="https://picsum.photos/300/200/?random=10">
      </div>
      <h3 class="font-medium text-lg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </h3>
      <div class="mt-auto">
        Sam
      </div>
    </div>
    <div class="w-72 mx-auto border border-solid border-red-600 flex flex-col">
      <div>
        <img class="w-full" src="https://picsum.photos/300/200/?random=11">
      </div>
      <h3 class="font-medium text-lg">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, quisquam, sapiente?
      </h3>
      <div class="mt-auto">
        Sam
      </div>
    </div>
    <div class="w-72 mx-auto border border-solid border-red-600 flex flex-col">
      <div>
        <img class="w-full" src="https://picsum.photos/300/200/?random=12">
      </div>
      <h3 class="font-medium text-lg">
        Lorem ipsum dolor sit amet.
      </h3>
      <div class="mt-auto">
        Sam
      </div>
    </div>
  </div>
</template>

10 行

<div class="mt-auto">
Sam
</div>

設定 card 底下 author style：

mt-auto：由於 card 高度因為 Flexbox 而等高，因此也可藉由自動調整 author 的 top margin 而達到相同效果

Conclusion

flex-grow、mb-auto 與 mt-auto 皆可達到相同效果，但關鍵是 card 的子層也要使用 Flexbox，因此出現兩層 Flexbox