CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS3 align-self 屬性 CSS3 align-content 屬性

CSS3 align-items 屬性使用方法及示例

align-items屬性為flex容器中的元素指定默認(rèn)對(duì)齊方式。

下表總結(jié)了此屬性的用法上下文和版本歷史記錄。

默認(rèn)值：	stretch
適用于：	彈性容器
繼承：	沒有
可動(dòng)畫制作：	否。請(qǐng)參見動(dòng)畫屬性。
版本：	CSS3的新功能
JavaScript 語法：	object.style.alignItems="center"

align-items的使用語法

該屬性的語法如下：

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

下面的示例顯示了正在使用的align-items屬性。

示例

 .flex-container {
           /* Safari */
           display: -webkit-flex; 
           -webkit-align-items: center;
           
           display: flex;
           align-items: center;
   }

測試看看?/?

屬性值

下表描述了此屬性的值。

值	描述
baseline	元素位于彈性容器的基線。
center	元素位于伸縮容器的中心。
flex-start	元素位于flex容器的開頭。
flex-end	元素位于flex容器的末端。
stretch	將元素拉伸以適合伸縮容器。可用空間在所有元素之間平均分配。這是默認(rèn)值。
initial	將此屬性設(shè)置為其默認(rèn)值。
inherit	如果指定，則關(guān)聯(lián)元素采用其父元素屬性的align-items值。

瀏覽器兼容性

align-items屬性瀏覽器的兼容性，所有主流瀏覽器均支持該屬性。

	Firefox 20+ Google Chrome21+ Internet Explorer 11+ Apple Safari 7+ ^-webkit- Opera 12.1+

注意： Apple Safari 7及更高版本支持該align-items屬性，但需要-webkit-前綴，例如-webkit-align-items: center;

進(jìn)一步閱讀

請(qǐng)參考以下教程：CSS Alignment。

相關(guān)屬性：align-content，align-items，align-self，display，flex，flex-basis，flex-direction，flex-flow，flex-grow，flex-shrink，flex-wrap，justify-content，min-height，min-width，order。

CSS3 align-self 屬性 CSS3 align-content 屬性