css的align-self屬性怎么用

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

　　align-self

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

　　語法

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

　　各個值解析:

　　auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。

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

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

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

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

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

　　以下實例演示了彈性子元素上 align-self 不同值的應用效果：

　　實例

　　.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屬性怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！