父容器布局屬性
flexBox.png
1.FlexDirection:主軸方向(String)
- row(橫向正向布局)
- row-reverse(橫向逆向布局)
- column(縱向正向布局)【默認】
- column-reverse(縱向逆向布局)
2.flexWrap:單行元素是否支持換行(String)
- wrap(支持換行)
- nowrap(不支持換行)【默認】
3.justifyContent:主軸方向子視圖對齊方式(String)
- flex-start (主軸開始的位置對齊)【默認】
- center(主軸中間位置對齊)
- flex-end (主軸結束的位置對齊)
- space-between (主軸兩側靠邊對齊绿映,item之間間隔平分)
- space-around(item之間間隔平分订讼,主軸兩側為item之間間隔的一半)
4.alignItems:側軸方向子視圖對齊方式(String)
- flex-start (側軸開始的位置對齊)【默認】
- center(側軸中間位置對齊)
- flex-end (側軸結束的位置對齊)
- stretch(拉伸填充)
子視圖布局屬性
box.png
1.alignSelf:子視圖重寫父容器的alignItems的屬性(String)
- auto(父視圖設置了就直接繼承狱掂,否則為stretch)【默認】
- flex-start (側軸開始的位置對齊)
- center(側軸中間位置對齊)
- flex-end (側軸結束的位置對齊)
- stretch(拉伸填充)
2.flex:子視圖在父視圖上的伸縮性温技,存在多個視圖時柠衍,值越大入愧,伸縮性越大(number)
- number
3.width贬堵,height:寬高(number)
- width(寬)
- height(高)
4.padding:內邊距(number)
- padding(四周內邊距)
- paddingHorizontal(水平方向上的內邊距)
- paddingVertical(豎直方向的內邊距)
- paddingLeft(左內邊距)
- paddingRight(右內邊距)
- paddingTop(上內邊距)
- paddingBottom(下內邊距)
5.margin:外邊距(number)
- margin(四周外邊距)
- marginHorizontal(水平方向上的外邊距)
- marginVertical(豎直方向的外邊距)
- marginLeft(左外邊距)
- marginRight(右外邊距)
- marginTop(上外邊距)
- marginBottom(下外邊距)
6.position:子視圖在父視圖中布局定位的方式
relative(相對布局划纽,子視圖為流式布局不重疊)【默認】
left: 相對于自己的位置左移
right:相對于自己的位置右移
拗窃。瞎领。。absolute(絕對布局随夸,子視圖相對于父視圖布局)
left: 相對于父視圖的位置左移
right:相對于父視圖的位置右移
九默。。宾毒。