align-items

實例

居中對齊彈性盒的各項 <div> 元素：

div { display: flex; align-items:center; }

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

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

屬性
align-items	21.0	11.0	20.0	9.0 7.0?-webkit-	12.1

align-items 屬性定義flex子項在flex容器的當前行的側(cè)軸（縱軸）方向上的對齊方式。

提示：使用每個彈性對象元素的 align-self 屬性可重寫 align-items 屬性。

默認值：	stretch
繼承：	否
可動畫化：	否。請參閱可動畫化（animatable）。
版本：	CSS3
JavaScript 語法：	object.style.alignItems="center" 運行代碼

值	描述
stretch	默認值。元素被拉伸以適應容器。如果指定側(cè)軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
center	元素位于容器的中心。彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
flex-start	元素位于容器的開頭。彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end	元素位于容器的結(jié)尾。彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
baseline	元素位于容器的基線上。如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
initial	設置該屬性為它的默認值。請參閱 initial。
inherit	從父元素繼承該屬性。請參閱 inherit。

CSS 參考手冊：align-self 屬性

上一篇：align-content 下一篇：align-self