align-content

CSS 參考手冊(cè)

實(shí)例

對(duì)齊彈性盒的 <div> 元素的各項(xiàng)：

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

運(yùn)行代碼 ?

瀏覽器支持

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

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

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

定義和用法

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)畫化：	否。請(qǐng)參閱可動(dòng)畫化（animatable）。
版本：	CSS3
JavaScript 語法：	object.style.alignContent="center" 運(yùn)行代碼

CSS 語法

默認(rèn)值

值	描述
stretch	默認(rèn)值。元素被拉伸以適應(yīng)容器。各行將會(huì)伸展以占用剩余的空間。如果剩余的空間是負(fù)數(shù)，該值等效于'flex-start'。在其它情況下，剩余空間被所有行平分，以擴(kuò)大它們的側(cè)軸尺寸。
center	元素位于容器的中心。各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時(shí)在彈性盒容器中居中對(duì)齊，保持彈性盒容器的側(cè)軸起始內(nèi)容邊界和第一行之間的距離與該容器的側(cè)軸結(jié)束內(nèi)容邊界與第最后一行之間的距離相等。（如果剩下的空間是負(fù)數(shù)，則各行會(huì)向兩個(gè)方向溢出的相等距離。）
flex-start	元素位于容器的開頭。各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側(cè)軸起始邊界緊靠住該彈性盒容器的側(cè)軸起始邊界，之后的每一行都緊靠住前面一行。
flex-end	元素位于容器的結(jié)尾。各行向彈性盒容器的結(jié)束位置堆疊。彈性盒容器中最后一行的側(cè)軸起結(jié)束界緊靠住該彈性盒容器的側(cè)軸結(jié)束邊界，之后的每一行都緊靠住前面一行。
space-between	元素位于各行之間留有空白的容器內(nèi)。各行在彈性盒容器中平均分布。如果剩余的空間是負(fù)數(shù)或彈性盒容器中只有一行，該值等效于'flex-start'。在其它情況下，第一行的側(cè)軸起始邊界緊靠住彈性盒容器的側(cè)軸起始內(nèi)容邊界，最后一行的側(cè)軸結(jié)束邊界緊靠住彈性盒容器的側(cè)軸結(jié)束內(nèi)容邊界，剩余的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。
space-around	元素位于各行之前、之間、之后都留有空白的容器內(nèi)。各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。如果剩余的空間是負(fù)數(shù)或彈性盒容器中只有一行，該值等效于'center'。在其它情況下，各行會(huì)按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時(shí)第一行前面及最后一行后面的空間是其他空間的一半。
initial	設(shè)置該屬性為它的默認(rèn)值。請(qǐng)參閱 initial。
inherit	從父元素繼承該屬性。請(qǐng)參閱 inherit。