align-items 屬性介紹

霈霈 已發佈 2019-6-21

align-itemsjustify-content 相反,主要以交錯軸線來做排版,
現在有 1 號 (紅色)、 2 號 (藍色)、 3 號 (黃色) 三個區塊 包覆在灰色區塊內,這三個區塊分別設有不同 min-height 的高度,以下是將 align-items 各種屬性填入灰色區塊內的效果。

練習範例: https://codepen.io/peiqun/pen/ewepvZ

  1. align-items: flex-start 對齊交錯軸線最前端
    align-items

  1. align-items: flex-end 對齊交錯軸線最末端
    align-items

  1. align-items: center 對齊交錯軸線中央
    align-items

  1. align-items: stretch 預設值,將內容元素撐開至 flexbox 大小
    align-items

  1. align-items: baseline 對齊內容物的基線
    align-items

關於筆者

暱稱:霈霈

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