您好,登錄后才能下訂單哦!
這篇文章主要介紹了css中的align-items屬性語法是什么,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
align-items 屬性
align-items 設(shè)置或檢索彈性盒子元素在側(cè)軸(縱軸)方向上的對齊方式。
語法
align-items: flex-start | flex-end | center | baseline | stretch
各個值解析:
flex-start:彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end:彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center:彈性盒子元素在該行的側(cè)軸(縱軸)上居中放置。(如果該行的尺寸小于彈性盒子元素的尺寸,則會向兩個方向溢出相同的長度)。
baseline:如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。
stretch:如果指定側(cè)軸大小的屬性值為'auto',則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸,但同時會遵照'min/max-width/height'屬性的限制。
以下實例演示了 stretch(默認(rèn)值) 的使用:
實例
.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;
}
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“css中的align-items屬性語法是什么”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。