常用的屬性:
屬性1. flexDirection 該屬性取決于主軸的方向
row:主軸為水平方向起點在最左側
row-reverse:主軸為水平方向起點在最右邊
column(默認):主軸為豎直方向起點在最上方
column-reverse:主軸在豎直方向起點在最下方
圖1
要改變其布局方式首先要確定其主軸方向在樣式里邊進行修改如下:
圖2
注:確定了主view的主軸方向子view的方向也隨之確定如要改變只需改變子view的樣式即可
屬性2.justifyContent:決定主軸的對齊方式
flex-start:伸縮項目向一行的開始位置對齊
圖3
flex-end:伸縮項目向一行的結束位置對齊
圖4
center:伸縮項目向中間對齊
圖5
space-between:兩端對齊項目中間的間距相等
圖6
space-around:平均分配兩端保留一半的空間
圖7
屬性3:設置側軸的對齊方式alignItems
flex-start:頂部對齊。 ? flex-end:底部對齊。 center:居中。 ?stretch:(默認)拉伸和父視圖的高度一樣
屬性4:flexWrap 默認情況下的項目都在一條直線上超出了父視圖不會進行換行的操作
wrap:換行 ? ? ? ? ? ? ? ?nowrap:不換行(默認)
元素屬性
1.flex:設置父視圖與本身控件的百分比
2.alignSelf:設置其中某個控件的側軸對齊可以覆蓋alignItems