CSS 參考手冊

CSS @規(guī)則(RULES)

CSS 屬性大全

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

描述

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

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

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

align-content的使用語法

該屬性的語法如下：

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)語法 */
           display: flex;
           flex-flow: row wrap;
           align-content: space-around;
    }

測試看看?/?

屬性值

下表描述了此屬性的值。

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

瀏覽器兼容性

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

	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)一步閱讀

請參考以下教程：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 屬性