css的align-self屬性怎么用

小編給大家分享一下css的align-self屬性怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　align-self

　　align-self 屬性用于設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對(duì)齊方式。

　　語(yǔ)法

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

　　各個(gè)值解析:

　　auto：如果'align-self'的值為'auto'，則其計(jì)算值為元素的父元素的'align-items'值，如果其沒(méi)有父元素，則計(jì)算值為'stretch'。

　　flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。

　　flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。

　　center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）。

　　baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對(duì)齊。

　　stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。

　　以下實(shí)例演示了彈性子元素上 align-self 不同值的應(yīng)用效果：

　　實(shí)例

　　.flex-item {

　　background-color: cornflowerblue;

　　width: 60px;

　　min-height: 100px;

　　margin: 10px;

　　}

　　.item1 {

　　-webkit-align-self: flex-start;

　　align-self: flex-start;

　　}

　　.item2 {

　　-webkit-align-self: flex-end;

　　align-self: flex-end;

　　}

　　.item3 {

　　-webkit-align-self: center;

　　align-self: center;

　　}

　　.item4 {

　　-webkit-align-self: baseline;

　　align-self: baseline;

　　}

　　.item5 {

　　-webkit-align-self: stretch;

　　align-self: stretch;

　　}

以上是“css的align-self屬性怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！