如何水平靠右 ? | 點燈坊

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

Version

Tailwind CSS 2.1.1

text-right

使用最簡單直覺的 text-right 使 CSS 水平靠右。

<template>
  <div class="text-right">
    Tailwind CSS
  </div>
</template>

• text-right：<div> 為 block 會佔據一整行，直接使用 text-right 讓 content 水平靠右於 <div>

ml-auto

w-fit

水平置中另一個直覺思維就是使用 ml-auto 自動調整 left margin 而水平靠右。

但有個前提是 content 的 <div> 必須內縮與 content 同寬，ml-auto 才有動態調整 margin 空間。

<template>
  <div class="w-fit ml-auto">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

• w-fit：width 與 content 同寬，但仍維持其 block 特性，讓 ml-auto 有操作空間
• ml-auto：自動調整 left margin 而水平靠右

flex

為了讓 <div> 與 content 同寬，另一個技巧是父層 box 引入 Flexbox 使子層 item 與 content 同寬。

<template>
  <div class="flex">
    <div class="ml-auto">
      Tailwind CSS
    </div>
  </div>
</template>

第 2 行

<div class="flex">

設定父層 box style：

• flex：為了要使 <div> 能與 conent 同寬有 margin 可操作水平靠右

第 3 行

<div class="ml-auto">

設定子層 item style：

• ml-auto：由於 <div> 與 content 同寬，因此可自動調整 left margin 而水平靠右

Flexbox

justify-end

Tailwind CSS 水平靠右，使用 justify-end 實現。

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

設定父層 box style：

• flex：子層 item 使用 Flexbox
• justify-end： 直接將 <div> 水平靠右

justify-start

Tailwind CSS 水平靠右，改用 justify-start 實現。

<template>
  <div class="flex flex-row-reverse justify-start">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

• flex：一樣使用 Flexbox
• flex-row-reverse ： <div> 從右向左
• justify-start： 從開始之處排序，由於 <div> 從右向左，相當於水平靠右

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

flex-grow

Tailwind CSS 水平靠右，但在子層 item 處理。

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

一個簡單的思路，分成 2 個 <div>，靠右 <div> 只跟著 content 本身而變，靠左 <div> 自然瓜分剩下 width，如此 Tailwind CSS 看起來如同水平靠右：

• flex：外層 <div> 使用 Flexbox
• flex-grow：左側 <div> 使用 flex-grow 瓜分剩下 width

fixed

Tailwind CSS 水平靠右，但使用 fixed 處理。

<template>
  <div class="w-fit fixed left-0 right-0 ml-auto">
    Tailwind CSS
  </div>
</template>

• w-fit：width 與 content 同寬，但仍維持其 block 特性，讓 ml-auto 有操作空間
• fixed：使用 fixed position
• left-0、right-0：要使用 ml-auto 水平靠右，前提必須要有空間使其調整 margin，left-0 於左側邊緣緊貼 browser，right-0 於右側邊緣緊貼 browser，因此相當於架構出無形的矩形空間，只是受限於 w-fit 只顯示與 content 同寬部分，剩下空間可由 margin: auto 自由發揮而水平靠右
• ml-auto：自動調整 left margin 而水平靠右

absolute

Tailwind CSS 水平靠右，但使用 absolute 處理。

<template>
  <div class="w-fit absolute left-0 right-0 ml-auto">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

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

relative

Tailwind CSS 水平靠右，但使用 relative 處理。

<template>
  <div class="relative">
    <div class="absolute right-0">
      CSS
    </div>
  </div>
</template>

第 2 行

<div class="relative">

設定父層 box style：

• relative：父層 box 使用 relative position，子層 absolute 將以此層定位

第 3 行

<div class="absolute right-0">

設定子層 item style：

• absolute：子層 item 使用 absolute position
• right-0：設定 right 為 0，相當於水平靠右

Conclusion

• Tailwind 擁有多種方式水平靠右：text-right、ml-auto、Flexbox 、 fixed 、 absolute 與 relative，可視實際需求靈活運用