CSS3 教程

CSS align-content 屬性

定義和用法

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

提示：使用 justify-content 屬性對(duì)齊主軸上的各項(xiàng)（水平）。

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

默認(rèn)值：	stretch
繼承：	否
可動(dòng)畫化：	否。
版本：	CSS3
JavaScript 語法：	object.style.alignContent="center" 嘗試一下 »

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

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

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

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

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