align-self 屬性介紹

霈霈 已發佈 2019-6-21

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

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

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

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

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

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

關於筆者

暱稱:霈霈

介紹:六角學院前端工程師,目前就讀高雄師範大學的軟體工程學系研究所