CSS align-items 屬性

CSS 參考手冊(cè) CSS 參考手冊(cè)

定義和用法

align-items：設(shè)置了 flex 容器的對(duì)齊方式。

提示：使用每個(gè) flex 對(duì)象元素的 align-self 屬性可重寫 align-items 屬性。

默認(rèn)值： stretch
繼承： 否
可動(dòng)畫化： 否。請(qǐng)參閱 可動(dòng)畫化（animatable）。
版本： CSS3
JavaScript 語法： object.style.alignItems="center"嘗試一下

CSS 語法

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

屬性值

值 描述測(cè)試
stretch 默認(rèn)，拉伸元件以適應(yīng)容器。 測(cè)試 ?
center 中心元素在容器內(nèi)。 測(cè)試 ?
flex-start 位置元素在容器的開頭。 測(cè)試 ?
flex-end 位置元素在容器的末端。 測(cè)試 ?
baseline 位置元素在容器的基線。 測(cè)試 ?
initial 設(shè)置為默認(rèn)值。請(qǐng)參閱 initial。 測(cè)試 ?
inherit 從其父元素繼承此屬性。請(qǐng)參閱 inherit。  

實(shí)例

實(shí)例

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

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

嘗試一下 ?

瀏覽器支持

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

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

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

相關(guān)文章

CSS 參考手冊(cè)：align-content 屬性

CSS 參考手冊(cè)：align-self 屬性


CSS 參考手冊(cè) CSS 參考手冊(cè)