如何垂直靠下 ? | 點燈坊

垂直靠上為實務上常見需求，Tailwind CSS 可由多種方式實現。

Version

Tailwind CSS 2.1.1

m-auto

Tailwind CSS 垂直靠下，在子層 item 使用 m-auto 處理。

<template>
  <div class="h-screen flex">
    <div class="mt-auto">
      Tailwind CSS
    </div>
  </div>
</template>

第 2 行

<div class="h-screen flex">

設定父層 box style：

• h-screen：要設定垂直置中，因此要設定父層 box 高度
• flex：使用 flex 令子層 item 根據 content 內縮

第 3 行

<div class="mt-auto">

設定子層 item style：

• mt-auto：因為父層 box 有設定高度，因此子層 item 可自動調整 top margin 而垂直靠下

Flexbox

justify-end

Flexbox 亦有多種方式可垂直靠下，先討論從父層 box 處理。

<template>
  <div class="h-screen flex flex-col justify-end">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

• h-screen：設定 box 高度
• flex：子層 item 使用 Flexbox 排列
• flex-col：設定 main axis 為 column，也因為 main axis 為 column，本來 Flexbox 會使 <div> 寬度由 content 決定，高度撐滿 100vh，現在改成高度由 content 決定，寬度撐滿一整列
• justify-end：直接將 <div> 靠下於 main axis，因為目前 main axis 為 column，相當於垂直靠下

justify-start

Tailwind CSS 垂直靠下，一樣使用 justify- 系列。

<template>
  <div class="h-screen flex flex-col-reverse justify-start">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

• h-screen：設定 box 高度

• flex：子層 item 使用 Flexbox 排列
• flex-col-reverse：main axis 為 column，但改從下往上排列
• justify-start：因為由下往上排列，justify-start 相當於垂直靠下

實務上不會使用這種方式，只是展示亦可使用 justify-start 達成垂直靠下

items-end

Tailwind CSS 垂直靠下，改用 items- 系列。

<template>
  <div class="h-screen flex items-end">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

• h-screen：設定 box 高度
• flex：子層 item 使用 Flexbox 排列
• items-end：由於沒更改 flex-direction，因此目前 main axis 仍是 column，可使用 items-end 直接靠下於 cross axis，相當於垂直靠下

flex-grow

Tailwind CSS 垂直靠下於 <div>。

<template>
  <div class="h-screen flex flex-col">
    <div class="flex-grow"/>
    <div>Tailwind CSS</div>
  </div>
</template>

第 2 行

<div class="h-screen flex flex-col">

設定父層 box style：

• h-screen：設定 box 高度
• flex：子層 item 使用 Flexbox 排列
• flex-col：設定 main axis 為 column

第 3 行

<div class="flex-grow"/>

• flex-grow：表示空白部分剩餘 height 將由此 <div> 平分，因此看起來為垂直靠下

fixed

Tailwid CSS 垂直靠下，但使用 fixed 處理。

<template>
  <div class="h-fit fixed top-0 bottom-0 mt-auto">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

• h-fit：height 與 content 同高，但仍維持其 block 特性，讓 mt-auto 有操作空間
• fixed：使用 fixed position
• top-0、bottom-0：要使用 mt-auto 垂直靠下，前提必須要有空間使其調整 margin，top-0 於上側邊緣緊貼 browser，bottom-0 於下側邊緣緊貼 browser，因此相當於架構出無形的矩形空間，只是受限於 h-fit 只顯示與 content 同高部分，剩下空間可由 mt-auto 自由發揮而垂直靠下
• mt-auto：自動調整 top margin 而垂直靠下

absolute

Tailwind CSS 垂直靠下，但使用 absolute 處理。

<template>
  <div class="h-fit absolute top-0 bottom-0 mt-auto">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

• h-fit：height 與 content 同高，但仍維持其 block 特性，讓 mt-auto 有操作空間
• absolute：使用 absolute position，因為其父層皆沒設定定位，相當於定位在 window
• top-0、bottom-0：要使用 mt-auto 垂直靠下，前提必須要有空間使其調整 margin，top-0 於上側邊緣緊貼 browser，bottom-0 於下側邊緣緊貼 browser，因此相當於架構出無形的矩形空間，只是受限於 h-fit 只顯示與 content 同高部分，剩下空間可由 mt-auto 自由發揮而垂直靠下
• mt-auto：自動調整 top margin 而垂直靠下

relative

Tailwind CSS 垂直靠下，但使用 relative 處理。

<template>
  <div class="relative h-screen">
    <div class="absolute bottom-0">
      Tailwind CSS
    </div>
  </div>
</template>

第 2 行

<div class="relative h-screen">

設定父層 box style：

• relative：父層 box 使用 relative position，子層 absolute 將以此層定位
• h-screen：設定父層 box 高度

第 3 行

<div class="absolute bottom-0">

設定子層 item style：

• absolute：子層 item 使用 absolute position
• bottom-0：設定 top 為 0，相當於垂直靠下

Conclusion

• Tailwind CSS 擁有多種方式垂直靠下：m-auto、Flexbox 、 fixed 、 absolute 與 relative，可視實際需求靈活運用