CSSalign-items屬性

CSS 參考手冊CSS 參考手冊

定義和用法

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默認,拉伸元件以適應容器。測試 ?
center中心元素在容器內。測試 ?
flex-start位置元素在容器的開頭。測試 ?
flex-end位置元素在容器的末端。測試 ?
baseline位置元素在容器的基線。測試 ?
initial設置為默認值。請參閱initial測試 ?
inherit從其父元素繼承此屬性。請參閱inherit 


實例

實例

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

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


瀏覽器支持

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

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

屬性     
align-items21.011.020.09.0
7.0 -webkit-
12.1

相關文章

CSS 參考手冊:align-content 屬性

CSS 參考手冊:align-self 屬性


CSS 參考手冊CSS 參考手冊