新手指南：了解 CSS align-items 與 align-self 的差異

更新日期： 2024 年 9 月 14 日

在使用 CSS Flexbox 進行布局時，align-items 和 align-self 是兩個非常實用的屬性。

它們都可以用來控制元素在容器中的對齊方式。

這篇文章將帶你了解這兩者的區別，以及如何使用它們來實現你想要的布局效果。

align-items 與 align-self 的差異

總結來說：

align-items 是什麼？

align-items 是一個 CSS 屬性，通常用來設定 Flex 容器內所有子元素（Flex Items）在交叉軸（Cross Axis）上的對齊方式。

交叉軸通常與主軸垂直，預設情況下是垂直方向。

align-items 的常見值

例子：align-items 讓所有子元素居中對齊

.container {
  display: flex;
  align-items: center; /* 所有子元素在垂直方向居中 */
  height: 300px;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

在這個例子中，align-items: center; 讓所有 .item 元素在容器 .container 的垂直方向（交叉軸）上居中對齊。

align-self 是什麼？

align-self 是一個 CSS 屬性，讓你可以針對單個子元素（Flex Item）來覆蓋 align-items 的對齊方式。

換句話說，align-self 可以讓某個子元素與容器內的其他子元素有不同的對齊方式。

align-self 的常見值

align-self 的值與 align-items 是相同的，包括：

• flex-start
• flex-end
• center
• baseline
• stretch

例子：align-self 覆蓋單個元素的對齊方式

.container {
  display: flex;
  align-items: center; /* 所有子元素在垂直方向居中 */
  height: 300px;
}

.item-special {
  align-self: flex-end; /* 這個元素會在容器底部對齊 */
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item item-special">Item 2</div>
  <div class="item">Item 3</div>
</div>

在這個例子中，儘管 align-items: center; 讓所有的 .item 元素都在容器中垂直居中。

但 .item-special 使用了 align-self: flex-end;，因此它會在容器底部對齊。

何時使用 align-items？

當你需要統一所有子元素的對齊方式時，例如讓所有的子元素在容器中居中對齊，這時候應該使用 align-items：

.container {
  display: flex;
  align-items: center; /* 所有子元素居中 */
}

何時使用 align-self？

當你需要覆蓋單個子元素的對齊方式時，例如讓某個子元素在容器的底部對齊，而其他元素依然居中對齊，這時候應該使用 align-self：

.item-special {
  align-self: flex-end; /* 只有這個元素在底部對齊 */
}

結語

理解 align-items 和 align-self 的區別，能夠幫助你在 Flexbox 布局中，更靈活地控制元素的對齊方式。

無論是想統一控制所有子元素的對齊，還是針對單個元素進行調整，這兩個屬性都能夠讓你輕鬆實現你想要的布局效果。

希望這篇文章能幫助你更好地掌握這兩個重要的 CSS 屬性！