align-self 可以個別調整子元素在交錯軸線的位置，屬性與 align-item 相同。假如我們已經在父元素上設定 align-item，但要其中一個內容物的位置需要調整成其他對齊方式，這時我們就可以針對該元素設定 align-self 來覆寫原本 align-item 的屬性。
下列有紅、藍、黃三個區塊 包覆在灰色區塊內，以下是將不同 align-self 屬性填入黃色區塊的效果：

範例程式碼: https://codepen.io/peiqun/pen/YoEwgX

1. 當灰色區塊設有 align-item: center 時，使用 flex-start 對齊交錯軸線最前端
   

2. 當灰色區塊設有 align-item: center 時，使用 flex-end 對齊交錯軸線最終端
   

3. 當灰色區塊設有 align-item: flex-end 時，使用 center 對齊交錯軸線中央
   

4. 當灰色區塊設有 align-item: center 時，使用 stretch 將內容元素撐開至 flexbox 大小