前言

今天要來討論最後一個作用在Flex Item的屬性，也代表Flexbox要進入尾聲了。

前幾篇有提到Flex container的對齊屬性，先來複習一下：

• align-items定義了彈性項目在彈性容器交叉軸（cross axis）上的單行彈性行的對齊行為。

• align-content則是定義了彈性容器內的彈性項目在多行且可以換行的彈性行在交叉軸方向的對齊行為。

• 兩屬性在 Flexbox 以及 Grid 有不同行為。

以上兩個屬性跟align-self在CSS規範裡是一同歸類在對齊章節裡介紹，之所以要分開說明是因為前兩者是在Flex container中宣告，而align-self則是在彈性項目中宣告。
而且 align-items 和 align-content 是會影響容器裡所有項目，若只想改變部分項目的對齊方式，就要在項目裡加上 align-self。

Flex Item 主要屬性:

align-self 屬性

align-self是用在 Flex item 或 Grid item 上的屬性，用來設定該項目在交叉軸（cross axis）上的對齊方式，藉由在個別項目的層級上層覆寫align-items，讓單一項目有不同的對齊行為。

align-self屬性值與 align-items 類似：

如果彈性項目的任一交叉軸邊距（cross-axis margins）是 auto，則 align-self 沒有作用。

範例

假設彈性容器的 align-items 的預設為stretch，

.container {
  display: flex;
  flex-direction: row;
  align-items: stretch;/* 所有項目填滿延伸在交叉軸上的空間*/
  height: 200px;
  border: 1px solid red;
}

當這個彈性容器的某一彈性項目設定了 align-self 屬性值，不同設定就會覆蓋/繼承 align-items 屬性值。

.item {
  width: 50px;
  height: 50px;
  background: lightblue;
  margin: 2px;
}

.specialItem {
  align-self: <屬性值>; /*依屬性值設定而有不同結果*/
}

align-self: flex-start → 此設定的彈性項目變成靠頂對齊

align-self: flex-end → 此設定的彈性項目變成靠底對齊

align-self: center → 此設定的彈性項目在容器高度上下之間置中

align-self: stretch → 同 stretch。

align-self: baseline → 此設定的彈性項目文字基線對齊

align-self: auto → 繼承使用 align-items 的值，也就是 stretch。

參考資料

書<CSS大全第四版>

CSS Flexible Box Layout Module Level 1 - 8.3.

Mdn : align-self