新!我的 44 頁電子書「44 分鐘學會 CSS」已經出版囉!😃

現在就取得 →

#align-items

定義彈性盒子項目如何根據交叉軸,在彈性盒子容器的行中對齊。

align-items: flex-start;

彈性盒子項目在交叉軸開始處對齊。

預設情況下,交叉軸是垂直的。這表示彈性盒子項目將垂直對齊在頂部

align-items: flex-end;

彈性盒子項目在交叉軸結束處對齊。

預設情況下,交叉軸是垂直的。這表示彈性盒子項目將垂直對齊在底部

align-items: center;

彈性盒項目會對齊於交叉軸中心

預設情況下,交叉軸為垂直。這表示彈性盒項目會置中垂直對齊。

align-items: baseline;

彈性盒項目會對齊於交叉軸基準線

預設情況下,交叉軸為垂直。這表示彈性盒項目會依序對齊,讓其文字基準線沿著水平線對齊。

align-items: stretch;

彈性盒項目會延伸至整個交叉軸

預設情況下,交叉軸為垂直。這表示彈性盒項目會填滿整個垂直空間。