flex彈性盒子
阿新 • • 發佈:2018-03-09
對齊方式 子項目 clas www. 容器 direct start 垂直 數值
註意事項
1.設為Flex布局之後,子元素的float,clear和vertical-align屬性都講失效
2.采用Flex布局的元素,稱為Flex容器(Flex container),所有的子元素成為容器成員,稱為Flex項目(Flex item)
3.容器默認存在兩根軸:水平的主軸和垂直的交叉軸
4.主軸的開始位置叫做main start,結束位置叫做main end
5.交叉軸的開始位置叫做cross start,結束位置叫做cross end
6.單個項目占據的主軸空間叫做main size,占據的交叉軸空間叫做cross size
容器的屬性
1.flex-direction:決定主軸的方向(即子項目的排列方向)
row(默認值):主軸為水平方向,起點在左端。
row-reverse:主軸為水平方向,起點在右端。
column:主軸為垂直方向,起點在上沿。
column-reverse:主軸為垂直方向,起點在下沿。
2.flex-wrap:換行
nowrap(默認):不換行
wrap:換行,第一行在上方
wrap-reverse:換行,第一行在下方
3.flex-flow:是flex-direction和flex-wrap屬性的簡寫
4.justify-content:定義了項目在主軸上的對齊方式
flex-start(默認值):左對齊 flex-end:右對齊 center: 居中 space-between:兩端對齊,項目之間的間隔都相等。 space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。
5.align-items:定義項目在交叉軸上如何對齊
flex-start:交叉軸的起點對齊。
flex-end:交叉軸的終點對齊。
center:交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。
6.align-content:定義多根軸線的對齊方式(一根軸線不生效)
flex-start:與交叉軸的起點對齊。 flex-end:與交叉軸的終點對齊。 center:與交叉軸的中點對齊。 space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。 space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。 stretch(默認值):軸線占滿整個交叉軸。
子項目屬性
1.order:定義項目的排列順序。數值越小,排列越靠前,默認為0
5.flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。後兩個屬性可選。
.item {
flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
}
該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性,而不是單獨寫三個分離的屬性,因為瀏覽器會推算相關值。
6.align-self屬性:定義單個項目的對齊方式,可以覆蓋align-items屬性
flex-start:交叉軸的起點對齊。
flex-end:交叉軸的終點對齊。
center:交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。
針對父級容器的設置
display:flex
flex-wrap:是否換行
flex-direction:子項的排列方向
justify-content:子項在水平方向的排列
align-content:多行子項在水平方向的排列
align-items:統一設置單行子項在水平方向的排列
針對子項的設置
flex:設置子項的比例關系
flex:1
order:設置子項在兄弟間的排列順序
align-self:單獨設置每個子項在垂直方向的排列
flex彈性盒子