CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS 屬性大全

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

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

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

默認(rèn)值：	auto
適用于：	彈性元素，包括流入的偽元素
繼承：	沒有
可動(dòng)畫制作：	否。請(qǐng)參見動(dòng)畫屬性。
版本：	CSS3的新功能
JavaScript 語(yǔ)法：	object.style.alignItems="center"

align-self的使用語(yǔ)法

該屬性的語(yǔ)法如下：

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

下面的示例顯示如何使用align-self屬性。

示例

.flex-container {
    /* Safari */
    display: -webkit-flex; 
    -webkit-align-items: flex-start;
    
    display: flex;
    align-items: flex-start;
}
.aligned {
    /* Safari */
    -webkit-flex: 1; 
    -webkit-align-self: stretch;
    
    flex: 1; 
    align-self: stretch;
}

測(cè)試看看?/?

屬性值

下表描述了此屬性的值。

值	描述
auto	元素采用其父元素屬性的計(jì)算值，align-items如果沒有父元素，則使用stretch。這是默認(rèn)值。
baseline	元素位于flex容器的基線。
center	元素位于伸縮容器的中心。
flex-start	元素位于flex容器的開頭。
flex-end	該元素位于伸縮容器的末端。
stretch	拉伸該元素以適合flex容器。
initial	將此屬性設(shè)置為其默認(rèn)值。
inherit	如果指定，則關(guān)聯(lián)元素采用其父元素屬性的計(jì)算值align-self。

瀏覽器兼容性

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

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

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

進(jìn)一步閱讀

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

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

CSS3 animation 屬性 CSS3 align-items 屬性