【Day 21】詳解 align-content屬性

2025 iThome 鐵人賽

DAY 21

Modern Web

17th鐵人賽

55 瀏覽

前言

繼昨天align-items，今天來討論align-content。

屬性	說明
`align-content`	沿交叉軸對齊多行項目（只有多行時有效）。

當彈性容器所在的交叉軸方向有額外的空間時，align-content 屬性指定彈性線在彈性框容器中如何沿著交叉軸分佈額外的空間，

類似於 justify-content 對齊主軸內的個別項目的方式，只是align-content處理的是彈性容器內的彈性行在交叉軸方向的對齊行為。

注意！align-content 屬性對單行彈性容器沒有影響，只會作用在包含多個彈性行的彈性容器，不會影響不允許換行的單行彈性容器。

以下是 align-content 屬性值：

align-content 屬性值	說明
stretch	為預設值，彈性行會拉伸延展以填滿剩餘空間。
flex-start	彈性行會靠近彈性容器的起始端排列（通常是上方）。
flex-end	彈性行會靠近彈性容器的尾端排列（通常是下方）。
center	彈性行會集中排列在彈性容器的中間。
space-between	彈性行會在彈性容器中平均分布，第一行靠近起始邊，最後一行靠近尾端，中間彈性行平均分隔。
space-around	彈性行之間會有相同的間距，但彈性容器邊緣的空間只有一半，換句話說，第一行與最後一行的間距會是其他間距的一半。
space-evenly	所有行之間與容器邊緣的間距都完全一致。

為預設值。
彈性線會拉伸以佔用額外的空間，額外的空間平均分佈為各行拉伸的距離。

flex-start 屬性值線條會朝向彈性容器的起點進行包裝。彈性容器中第一行的交叉起始（cross-start）邊緣與彈性容器的交叉起始邊緣齊平放置，每一行接下來的彈性行都與前一行對齊。

flex-end屬性值則是線條會朝向彈性容器的尾端進行包裝，最後一行的交叉尾端（cross-end）邊緣與彈性容器的交叉尾端邊緣齊平放置，每一行前面的彈性行都與它後面那一行對齊。

彈性線會朝向彈性容器的中心包裝。彈性容器中的彈性線會彼此齊平放置，並對齊在彈性容器的中心，彈性容器的交叉起始（cross-start）邊緣至彈性容器中的第一行之間距離，與彈性容器的交叉尾端（cross-end）邊緣至彈性容器中的最後一行之間距離相等。

彈性行會均勻分佈在彈性容器中，平均分佈是以「可用空間」角度來看，而不是彈性行大小來看。第一個彈性行會貼緊彈性容器的交叉起始（cross-start），最後一行則貼緊交叉尾端（cross-end），額外空間則平均分佈在彈性行之間，使任兩條彈性行之間距離相等。

彈性線均勻的分佈在所在的彈性容器，與space-between不同的是彈性行不會緊貼邊緣，而且cross-start到第一個彈性行以及cross-end到最後一個彈性行的距離，是其他任兩彈性行之間距離的一半。

彈性線均勻的分佈在所在的彈性容器，與space-around相同的是彈性行不會緊貼邊緣，但彼此間距相同。

假設彈性容器的高小於彈性行高的總和，使得彈性容器沒有足夠高度容納所有彈性行。
當彈性行溢出時：

比較項目	`align-items`	`align-content`
作用對象	單一項目內的子項目（交叉軸對齊）	整體多行的項目群組（交叉軸對齊）
適用條件	適用於單行或多行的 Flex/Grid 容器	只在有多行時生效（例如：Flex-wrap: wrap 或 Grid 多列）
針對誰作用	每一個子項目（item）	整體項目的多行群（lines）
對齊方向	沿著交叉軸（cross axis）	沿著交叉軸（cross axis）
範例說明	將所有項目在交叉軸方向對齊（如置頂、置中）	控制多行之間如何對齊（如行群靠上、平均分配）
常見用法	垂直置中（在水平方向排列時）	多列 Flex 或 Grid 的垂直間距分布