點燈坊

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

如何各自向左右兩側對齊 ?

Sam Xiao's Avatar 2021-03-04

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

Version

CSS 3

flex-grow: 1

between000

CSS 與 Rocks 各自向兩側對齊。

<template>
  <div class="box">
    <div>CSS</div>
    <div class="empty"/>
    <div>Rocks</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
}

.empty {
  flex-grow: 1
}
</style>

第 2 行

<div class="box">
  <div>CSS</div>
  <div class="empty"/>
  <div>Rocks</div>
</div>

CSS 與 Rocks 各自包在 <div> 內，為了使其各自向兩側對齊，在兩者之間多了個 <div>，且命名為 empty class。

第 10 行

.box {
  display: flex;
}

設定父層 box 的 style：

  • display: flex：子層 item 使用 Flexbox

14 行

.empty {
  flex-grow: 1
}
  • flex-grow: 1：中間的 <div> 使用 flex-grow 佔據所有剩餘寬度，因此使得 CSS 與 Rocks 各自向兩側對齊

justify-content: space-between

between001

CSS 與 Rocks 各自向兩側對齊。

<template>
  <div class="box">
    <div>CSS</div>
    <div>Rocks</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
}
</style>

第 2 行

<div class="box">
  <div>CSS</div>
  <div>Rocks</div>
</div>

CSS 與 Rocks 各自包在 <div> 內，為了使其向兩側對齊，再包一層 <div>。

15 行

.box {
  display: flex;
  justify-content: space-between;
}

設定父層 box 的 style：

  • display: flex：子層 item 使用 Flexbox
  • justify-content: space-between：space-between 會平分 <div> 剩餘的 width 放在兩個 <div> 之間，因此相當於向左向右各自對齊

margin: auto

side002

CSS 與 Rocks 各自向兩側對齊。

<template>
  <div class="box">
    <div class="litem">CSS</div>
    <div class="ritem">Rocks</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
}

.litem {
  margin-right: auto;
}

.ritem {
  margin-left: auto;
}
</style>

第 9 行

.box {
  display: flex;
}

設定父層 box 的 style：

  • display: flex：子層 item 使用 Flexbox

13 行

.litem {
  margin-right: auto;
}

設定子層左 item 的 style：

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

17 行

.ritem {
  margin-left: auto;
}

設定子層右 item 的 style：

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

first-child

side003

CSS 與 Rocks 各自向兩側對齊。

<template>
  <div class="box">
    <div>CSS</div>
    <div>Rocks</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
}

.box div:first-child {
  margin-right: auto;
}

.box div:last-child {
  margin-left: auto;
}
</style>

第 9 行

.box {
  display: flex;
}

設定父層 box 的 style：

  • display: flex：子層 item 使用 Flexbox

13 行

.box div:first-child {
  margin-right: auto;
}

設定子層左 item 的 style：

  • div:first-child：使用 :first-child 直接選擇左 item，可省下一個 class

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

17 行

.box div:last-child {
  margin-left: auto;
}

設定子層右 item 的 style：

  • div:last-child：使用 :last-child 直接選擇右 item，可省下一個 class

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

Conclusion

  • 初學 justify-content: space-between 可能只會想到多個 <div> 並存時，其間隔會相等，但事實上只有兩個 <div> 時，就可實作出各自向兩側對齊
  • 若想由子層設定，可使用 margin: auto

Reference

MDN, flex-grow
MDN, justify-content

# CSS