CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS3 align-content 屬性使用方法及示例

描述

align-content當(dāng)橫軸上有多余空間（垂直）時(shí)，CSS屬性可將彈性容器中的元素對(duì)齊到彈性容器中。此屬性對(duì)單行彈性容器沒(méi)有影響。此外，您可以使用CSS justify-content屬性（水平）對(duì)齊主軸上的元素。

下表總結(jié)了此屬性的用法上下文和版本歷史記錄。

默認(rèn)值：	stretch
適用于：	多行彈性容器
繼承：	沒(méi)有
可動(dòng)畫(huà)制作：	否。請(qǐng)參見(jiàn) 動(dòng)畫(huà)屬性。
CSS版本：	CSS3的新功能
JavaScript 語(yǔ)法：	object.style.alignContent="center"

align-content的使用語(yǔ)法

該屬性的語(yǔ)法如下：

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

下面的示例顯示了如何使用 CSS的align-content屬性。

示例

 .flex-container {
           /* Safari瀏覽器 */
           display: -webkit-flex; 
           -webkit-flex-flow: row wrap;
           -webkit-align-content: space-around;
           /* 標(biāo)準(zhǔn)語(yǔ)法 */
           display: flex;
           flex-flow: row wrap;
           align-content: space-around;
    }

測(cè)試看看?/?

屬性值

下表描述了此屬性的值。

值	描述
center	元素位于彈性容器的中心。
flex-start	元素位于flex容器的開(kāi)頭。
flex-end	元素位于flex容器的末端。
space-between	元素在彈性容器中均勻分布，以使兩個(gè)相鄰元素之間的空間相同。
space-around	元素在flex容器中均勻分布，以使每個(gè)元素周?chē)粗?，之間和之后）的空間相同。
stretch	將元素拉伸以適合彈性容器?？捎每臻g在所有元素之間平均分配。這是默認(rèn)值。
initial	將此屬性設(shè)置為其默認(rèn)值。
inherit	如果指定，則關(guān)聯(lián)元素采用其父元素屬性的計(jì)算值align-content。

瀏覽器兼容性

align-content所有主流瀏覽器均支持該屬性。數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)。

	Firefox 28+ Google Chrome21+ Internet Explorer 11+ Apple Safari 7+ ^-webkit- Opera 12.1+

注意： Apple Safari 7及更高版本支持該align-content屬性，但需要-webkit-前綴，例如-webkit-align-content:?center;

進(jìn)一步閱讀

請(qǐng)參考以下教程：CSS Alignment。

相關(guān)屬性：align-items，align-self，display，flex，flex-basis，flex-direction，flex-flow，flex-grow，flex-shrink，flex-wrap，justify-content，min-height，min-width，order。

CSS3 align-items 屬性