CSS align-content 屬性
示例
將行向 flex 容器的中心對齊
div {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
align-content
屬性指定 flex 行在 flexbox 容器的交叉軸上如何分佈。
在 flexbox 佈局中,主軸沿 flex-direction
方向(預設為“row”,水平),交叉軸垂直於主軸(預設為“column”,垂直)。
提示:使用 justify-content
屬性來對齊主軸上的專案(水平)。
注意:align-content
屬性也可用於 grid 容器,用於在塊方向上對齊 grid 專案。在英語頁面中,塊方向向下,內聯方向從左到右。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
align-content | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
CSS 語法
align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;
屬性值
值 | 描述 | 演示 |
---|---|---|
stretch | 預設值。行拉伸以佔用剩餘空間 | 演示 ❯ |
center | 行打包到 flex 容器的中心 | 演示 ❯ |
flex-start | 行打包到 flex 容器的起始位置 | 演示 ❯ |
flex-end | 行打包到 flex 容器的結束位置 | 演示 ❯ |
space-between | 行在 flex 容器中均勻分佈 | 演示 ❯ |
space-around | 行在 flex 容器中均勻分佈,兩端有半尺寸的間距 | 演示 ❯ |
space-evenly | 行在 flex 容器中均勻分佈,周圍有相等的間距 | 演示 ❯ |
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
相關頁面
CSS 教程:CSS Flexbox
CSS 教程: CSS Grid
CSS 參考: align-items 屬性
CSS 參考:align-self 屬性
CSS 參考:justify-content 屬性
HTML DOM 參考: alignContent 屬性