如何各自向左右兩側對齊 ? | 點燈坊

各自向左右兩側對齊為實務上常見需求，CSS 可由多種方式實現。

Version

Tailwind CSS 1.9.0

flex-grow

Tailwind 與 Rocks 各自向兩側對齊。

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

一個簡單的思路，分成 3 個 <div>，兩側 <div> 只跟著 content 本身而變，中間 <div> 自然瓜分剩下 width，如此 Tailwind 與 Rocks 看起來如同各自向兩側對齊：

• flex：子層 item 使用 Flexbox
• flex-grow：中間 <div> 使用 flex-grow 瓜分剩下 width

justify-between

Tailwind 與 Rocks 各自向兩側對齊。

<template>
  <div class="flex justify-between">
    <div>Tailwind</div>
    <div>Rocks</div>
  </div>
</template>

設定父層 box 的 style：

• flex：一樣使用 Flexbox
• justify-between：使各 <div> 之間的間隔相等，因為只有兩個 <div>，中間的間隔平分後剛好使其各自向兩側對齊

m-auto

Tailwind 與 Rocks 各自向兩側對齊。

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

第 2 行

<div class="flex">

設定父層 box 的 style：

• flex：子層 item 使用 Flexbox

第 3 行

<div class="mr-auto">Tailwind</div>

設定子層左 item 的 style：

• mr-auto：設定右側 margin 自動調整，因此水平靠左

第 4 行

<div class="ml-auto">Rocks</div>

設定子層右 item 的 style：

• ml-auto：設定左側 margin 自動調整，因此水平靠右

Conclusion

• flex-grow 其實最萬用，若不知 justify-between 也能由 flex-grow 兜出來
• justify-between 可平均分配剩餘 width，剛好達成自然向兩側對齊
• m-auto 則由子層 item 下手

Reference

Tailwind CSS, flex-grow
Tailwind CSS, justify-between