CSS align-content 屬性

定義和用法

align-content 屬性修改 flex-wrap 屬性的行為。它與 align-items 相似，但是它不對齊彈性項目，而是對齊彈性線。

注意：必須有多行項目，此屬性才能生效！

提示：使用 justify-content 屬性可將主軸（main-axis）上的項目水平對齊。

另請參閱：

CSS 教程：CSS Flexbox

CSS 教程：CSS Grid

CSS 參考手冊：align-items 屬性

CSS 參考手冊：align-self 屬性

CSS 參考手冊：justify-content 屬性

HTML DOM 參考手冊：alignContent 屬性

實例

將行打包到彈性容器的中央：

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

親自試一試

CSS 語法

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

屬性值

值 描述
stretch 默認值。行拉伸以占據剩余空間。
center 朝著彈性容器的中央對行打包。
flex-start 朝著彈性容器的開頭對行打包。
flex-end 朝著彈性容器的結尾對行打包。
space-between 行均勻分布在彈性容器中。
space-around 行均勻分布在彈性容器中，兩端各占一半。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： stretch
繼承： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.alignContent="center"

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0