CSS align-content 屬性

CSS 參考手冊CSS 參考手冊

定義和用法

align-content 屬性在彈性容器內(nèi)的各項沒有占用交叉軸上所有可用的空間時對齊容器內(nèi)的各項（垂直）。

提示：使用 justify-content 屬性對齊主軸上的各項（水平）。

注意：容器內(nèi)必須有多行的項目，該屬性才能渲染出效果。

默認值： stretch
繼承： 否
可動畫化： 否。請參閱 可動畫化（animatable）。
版本： CSS3
JavaScript 語法： object.style.alignContent="center"

CSS 語法

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

默認值

值 描述 測試
stretch 默認值。項目被拉伸以適應(yīng)容器。 測試 ?
center 項目位于容器的中心。 測試 ?
flex-start 項目位于容器的開頭。 測試 ?
flex-end 項目位于容器的結(jié)尾。 測試 ?
space-between 項目位于各行之間留有空白的容器內(nèi)。 測試 ?
space-around 項目位于各行之前、之間、之后都留有空白的容器內(nèi)。 測試 ?
initial 設(shè)置該屬性為它的默認值。請參閱 initial。 測試 ?
inherit 從父元素繼承該屬性。請參閱 inherit。  

實例

實例

對齊彈性盒的 <div> 元素的各項：

div
{
display: flex;
flex-flow: row wrap;
align-content:space-around;
}

嘗試一下 ?

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器的版本號。

緊跟在 -webkit-, -ms- 或 -moz- 后的數(shù)字為支持該前綴屬性的第一個版本。

屬性          
align-content 21.0 11.0 28.0 9.0
7.0 -webkit-		 12.1

相關(guān)文章

CSS 參考手冊：align-items 屬性

CSS 參考手冊：align-self 屬性

CSS 參考手冊：justify-content 屬性


CSS 參考手冊CSS 參考手冊