您好,登錄后才能下訂單哦!
這篇文章主要介紹flex作用于box容器上的屬性有哪些,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
用于指定flex主軸的方向,繼而決定flex子項在flex容器中的位置
row,默認(rèn)值,表示水平方向從左到右排列,此時水平方向為主軸 row-reverse,與row相反 column, 表示豎直方向從上到下排列,此時垂直方向為主軸方向 column-reverse,與column相反
用于指定flex子項是否換行
nowrap,默認(rèn)值,表示不換行,flex子項可能會溢出 wrap,表示換行,溢出的flex子項會被換到下一行 wrap-reverse,表示反方向換行
相當(dāng)于flex-direction和flex-wrap的合并寫法
用于水平方向flex子項的對齊方式
flex-start,默認(rèn)值,表示與行的起始位置對齊 flex-end,表示與行的末尾位置對齊 center,表示與行中間對齊 space-between,表示兩端對齊,中間間距相等,注意特殊情況,當(dāng)剩余空間為負(fù)數(shù)或者只有一個項時,效果和flex-start相同 space-around,表示間距相等,中間間距是兩端的兩倍,注意特殊情況,當(dāng)剩余空間為負(fù)數(shù)或只有一個項時,效果等同于center
用于垂直方向flex子項的對齊方式
stretch,默認(rèn)值,當(dāng)flex子項未設(shè)置高度或者高度為auto時,stretch起作用將flex子項高度設(shè)置為行高度,在只有一行的情況下,行的高度為容器的高度 flex-start,表示與側(cè)軸開始位置對齊 flex-end,表示與側(cè)軸末尾位置對齊 center,表示與側(cè)軸中間對齊
該屬性只作用于多行的情況下,用于多行的對齊方式
stretch,默認(rèn)值,當(dāng)flex子項未設(shè)置高度或者高度為auto時,stretch起作用將flex子項高度設(shè)置為行高度,在只有一行的情況下,行的高度為容器的高度 flex-start,表示與側(cè)軸開始位置對齊,緊靠側(cè)軸開始位置,之后的每一行都緊靠前面一行 flex-end,表示與側(cè)軸末尾位置對齊,緊靠側(cè)軸結(jié)束位置,之后的每一行都緊靠前面一行 center,表示各行與側(cè)軸中間對齊 space-between,表示兩端對齊,中間間距相等,當(dāng)剩余空間為負(fù)數(shù)或者只有一個項時,效果和flex-start相同 space-around,表示間距相等,中間間距是兩端的兩倍,注意特殊情況,當(dāng)剩余空間為負(fù)數(shù)或只有一個項時,效果等同于center
==該屬性制作用于多行的情況下,在只有一行的容器上無效,該屬性可以很好的處理航換之后相鄰行之間的間距==
以上是flex作用于box容器上的屬性有哪些的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。