CSS align-items 屬性
CSS 參考手冊實例
居中對齊彈性盒的各項 <div> 元素：
div
{
display: flex;
align-items:center;
}
流覽器支持
表格中的數字表示支持該屬性的第一個流覽器的版本號。
緊跟在 -webkit-, -ms- 或 -moz- 後的數字為支持該首碼屬性的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| align-items | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- |
12.1 |
定義和用法
align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
提示：使用每個彈性對象元素的 align-self 屬性可重寫 align-items 屬性。
| 默認值： | stretch |
|---|---|
| 繼承： | 否 |
| 可動畫化： | 否。請參閱 可動畫化（animatable）。 |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.alignItems="center" |
CSS 語法
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
屬性值
| 值 | 描述 | 測試 |
|---|---|---|
| stretch | 默認值。元素被拉伸以適應容器。 如果指定側軸大小的屬性值為'auto'，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。 |
測試 » |
| center | 元素位於容器的中心。 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。 |
測試 » |
| flex-start | 元素位於容器的開頭。 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。 |
測試 » |
| flex-end | 元素位於容器的結尾。 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。 |
測試 » |
| baseline | 元素位於容器的基線上。 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其他情況下，該值將參與基線對齊。 |
測試 » |
| initial | 設置該屬性為它的默認值。請參閱 initial。 | 測試 » |
| inherit | 從父元素繼承該屬性。請參閱 inherit。 |
相關文章
CSS 參考手冊：align-content 屬性
CSS 參考手冊：align-self 屬性