點燈坊

失くすものさえない今が強くなるチャンスよ

如何垂直靠上 ?

Sam Xiao's Avatar 2021-04-08

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

Version

Tailwind CSS 2.1.1

m-auto

top000

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

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

第 2 行

<div class="h-screen flex">

設定父層 box style：

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

第 3 行

<div class="mb-auto">

設定子層 item style：

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

Flexbox

justify-start

top001

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

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

設定父層 box style：

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

justify-end

top002

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

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

設定父層 box 的 style：

  • h-screen：設定 box height
  • flex：子層 item 使用 Flexbox 排列
  • flex-column-reverse ： main axis 為 column，但改從下往上排列
  • justify-end： 因為由下往上排列，justify-end 相當於垂直靠上

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

items-start

top003

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

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

設定父層 box 的 style：

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

flex-grow

top000

Tailwind CSS 垂直靠上，但在子層 item 處理。

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

需使用兩個子層 item。

第 2 行

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

設定父層 box 的 style：

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

第 4 行

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

fixed

top004

Tailwind CSS 垂直靠上，但使用 fixed 處理。

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

設定父層 box style：

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

absolute

top005

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

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

設定父層 box style：

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

relative

top005

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

<template>
  <div class="relative h-screen">
    <div class="absolute top-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 top-0">

設定子層 item style：

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

Conclusion

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

# TailwindCSS