css中的align-items屬性語法是什么

這篇文章主要介紹了css中的align-items屬性語法是什么，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　align-items 屬性

　　align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

　　語法

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

　　各個值解析:

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

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

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

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

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

　　以下實例演示了 stretch(默認值) 的使用:

　　實例

　　.flex-container {

　　display: -webkit-flex;

　　display: flex;

　　-webkit-align-items: stretch;

　　align-items: stretch;

　　width: 400px;

　　height: 250px;

　　background-color: lightgrey;

　　}

　　以下實例演示了 flex-start 的使用:

　　實例

　　.flex-container {

　　display: -webkit-flex;

　　display: flex;

　　-webkit-align-items: flex-start;

　　align-items: flex-start;

　　width: 400px;

　　height: 250px;

　　background-color: lightgrey;

　　}

　　以下實例演示了 flex-end 的使用:

　　實例

　　.flex-container {

　　display: -webkit-flex;

　　display: flex;

　　-webkit-align-items: flex-end;

　　align-items: flex-end;

　　width: 400px;

　　height: 250px;

　　background-color: lightgrey;

　　}

　　以下實例演示了 center 的使用:

　　實例

　　.flex-container {

　　display: -webkit-flex;

　　display: flex;

　　-webkit-align-items: center;

　　align-items: center;

　　width: 400px;

　　height: 250px;

　　background-color: lightgrey;

　　}

　　以下實例演示了 baseline 的使用:

　　實例

　　.flex-container {

　　display: -webkit-flex;

　　display: flex;

　　-webkit-align-items: baseline;

　　align-items: baseline;

　　width: 400px;

　　height: 250px;

　　background-color: lightgrey;

　　}

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css中的align-items屬性語法是什么”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!