CSS align-content 屬性
CSS 參考手冊實例
對齊彈性盒的 <div> 元素的各項：
流覽器支持
表格中的數字表示支持該屬性的第一個流覽器的版本號。
緊跟在 -webkit-, -ms- 或 -moz- 後的數字為支持該首碼屬性的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- |
12.1 |
定義和用法
align-content 屬性在彈性容器內的各項沒有佔用交叉軸上所有可用的空間時對齊容器內的各項（垂直）。
提示：使用 justify-content 屬性對齊主軸上的各項（水準）。
注意：容器內必須有多行的專案，該屬性才能渲染出效果。
| 默認值： | stretch |
|---|---|
| 繼承： | 否 |
| 可動畫化： | 否。請參閱 可動畫化（animatable）。 |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.alignContent="center" |
CSS 語法
默認值
| 值 | 描述 | 測試 |
|---|---|---|
| stretch | 默認值。元素被拉伸以適應容器。 各行將會伸展以佔用剩餘的空間。如果剩餘的空間是負數，該值等效於'flex-start'。在其他情況下，剩餘空間被所有行平分，以擴大它們的側軸尺寸。 |
測試 » |
| center | 元素位於容器的中心。 各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（如果剩下的空間是負數，則各行會向兩個方向溢出的相等距離。） |
測試 » |
| flex-start | 元素位於容器的開頭。 各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之後的每一行都緊靠住前面一行。 |
測試 » |
| flex-end | 元素位於容器的結尾。 各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，之後的每一行都緊靠住前面一行。 |
測試 » |
| space-between | 元素位於各行之間留有空白的容器內。 各行在彈性盒容器中平均分佈。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'flex-start'。在其他情況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。 |
測試 » |
| space-around | 元素位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其他情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。 |
測試 » |
| initial | 設置該屬性為它的默認值。請參閱 initial。 | 測試 » |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
相關文章
CSS 參考手冊：align-items 屬性
CSS 參考手冊：align-self 屬性
CSS 參考手冊：justify-content 屬性