- flex-direction決定主軸的方向砾省。
.box{
flex-direction: row | row-reverse | column |column-reverse;
}
- flex-wrap定義如果一條軸線排列不下,如何換行氯析。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- justify-content定義項目在主軸上的對齊方式躺孝。
.box{
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- align-items定了項目在交叉軸上的對齊方式跳昼。
.box{
align-items: flex-start | flex-end | center stretch | baseline;
}
- align-content定義了多根軸線的對齊方式。
.box{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
- order定義項目的排列順序,數(shù)值越小,排列越靠前邑茄。
.item{
order: <integer>;
}
- align-self屬性允許單個項目有與其他項目不一樣的對齊方式琉用,可覆蓋align-items屬性堕绩。
.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
- 備注:還有其他的屬性因為不常用所以沒有寫出來,可以看鏈接里更全邑时。
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者