次世代 Hugo

無駄を削ぎ、本質を研ぐ

使用 align-self 針對特定 Item 在 Cross Axis 對齊

Sam Xiao's Avatar 2021-03-06

align-items 是在父層 Box 設定，會影響所有子層 Item，若想只設定特定子層 Item 的 align-items 設定，或者在某子層 Item 覆蓋父層 Box 的 align-items 設定，則可使用 align-self。

Version

CSS 3

Specific Item

self000

Item2 與 item3 受到預設 align-items: stretch 影響自動 stretch 成父層 box 高度，但唯獨 item1 沒有 stretch，而且還垂直靠上。

<template>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  width: 100%;
  height: 90vh;
}

.item {
  width: 33%;
  margin: 10px;
}

.item1 {
  align-self: flex-start;
}
</style>

第 2 行

<div class="box">
  <div class="item item1">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
  • box：設定父層 box style
  • item：設定子層 item 共同 style
  • item1：設定子層 item1 特別 style

10 行

.box {
  display: flex;
  width: 100%;
  height: 90vh;
}

設定父層 box style：

  • display: flex：設定子層 item 使用 Flexbox
  • width: 100%：設定父層 box width
  • height: 90vh：設定父層 box height

16 行

.item {
  width: 33%;
  margin: 10px;
}

設定子層 item 共用 style：

  • width: 33%：設定子層 item width
  • margin: 10px：設定子層 item margin

21 行

.item1 {
  align-self: flex-start;
}

設定子層 item1 特別 style：

  • align-self: flex-start：父層 box 並沒有設定任何 align-items: start，因此子層 item 皆以預設 align-items: stretch 自動 stretch 與父層 box 同高，但若希望 item1 能 align-items: flex-start，則可用 align-self 單獨設定

margin: auto

self001

Item2 與 item3 自動 stretch 與父層 box 同高，而 item1 則垂直靠上。

<template>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  width: 100%;
  height: 90vh;
}

.item {
  width: 33%;
  margin: 10px;
}

.item1 {
  margin-bottom: auto;
}
</style>

21 行

.item1 {
  margin-bottom: auto;
}

設定子層 item1 特別 style：

  • margin-bottom: auto：item1 並沒有設定 align-self: flex-start，而是改用 margin-bottom: auto，因為父層 box 已經有設定 height，所以垂直方向有空間讓 margin: auto 動態調整 margin 而垂直靠上

可發現 align-self: flex-start 可用 margin-bottom: auto 取代

Override align-items

self002

Item2 與 item3 都已經垂直置中，唯 item1 仍是垂直靠上。

<template>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 90vh;
}

.item {
  width: 33%;
  margin: 10px;
}

.item1 {
  align-self: flex-start;
}
</style>

10 行

.box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 90vh;
}

設定父層 box style：

  • align-items: center：由於 item2 與 item3 都是垂直置中，因此將 align-items: center 設定在父層，可一次影響所有子層 item 設定

22 行

.item1 {
  align-self: flex-start;
}

設定 item1 特別 style：

  • align-self: flex-start：只有 item1 要垂直靠上，因此使用 align-self: flex-start 單獨設定，可覆蓋父層 box 的 align-items: center

margin: auto

self003

Item2 與 item3 都已經垂直置中，唯 item1 仍是垂直靠上。

<template>
  <div class="box">
    <div class="item item1">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 500px;
}

.item {
  width: 33%;
  margin: 10px;
}

.item1 {
  margin-bottom: auto;
}
</style>

22 行

.item1 {
  margin-bottom: auto;
}

設定子層 item1 特別 style：

  • margin-bottom: auto：item1 並沒有設定 align-self: flex-start 覆蓋父層 box 的 align-items: center，而是改用 margin-bottom: auto，因為父層 box 已經有設定 height，所以垂直方向有空間讓 margin: auto 動態調整 margin 而垂直靠上

可發現 align-self: flex-start 可用 margin-bottom: auto 取代

Conclusion

  • align-self 可視為 align-items 的子層版，只針對特定 item 設定
  • 也因為 align-self 多數可以使用 margin: auto 實現，因此實務上較少使用 align-self

Reference

MDN, align-self

# CSS