最近看了react-native的 flexbox的布局,它的布局和安卓ios完全不同,但是可以实现一些效果,监于本人开发过ios和android应用,对布局有一定的了解,遂将flexbox与ios和android中的布局进行比较.
它们都可以控制控件收缩还是拉伸
android:match_parent,wrap_content
ios: compress resistence priority, hugging priority
flex: flex=0, flex=1
但是flex的布局功能比ios和android自带的布局方式都强大
1.flex可以方便的控制相邻控件的比例,这在android上可以通过linearlayout来做到,而在ios上不容易做到
2.flex的布局方式更灵活,android中一般会用到LinearLayout,FrameLayout,RelativeLayout,iOS的storyboard和xib中使用AutoLayout来控制控件的缩放关系,难以修改。而flex的布局像是android的LinearLayout内嵌RelativeLayout,比AutoLayout的方式修改灵活。
flex=0相当于android布局中的wrap_content和ios autolayout中的高content hugging priority
flex=1相当于android布局中的match_parent和ios autolyaout中的高content compression resistence priority
一个组件中只有一个flex值,那么flex的值是控制高度还是宽度的呢
这取决于它的父容器的flexDirection的值
当然,对于内部元素来说
元素的默认属性值是flex:0,flexDirection:'column',alignItems:'stretch',justifyContent:'flex-start'
1.当父元素的flexDirection='column'时
flex控制的是高度的填充比率,
组件的宽度由父容器的alignItems属性控制
1)alignItems的值是stretch时 宽度为match_parent
2)当alignItems的值是auto,flex-start,flex-end,center时,宽度为wrap_content
2.当父元素的flexDirection='row'时
flex控制的是宽度的填充比率,
组件的高度由父容器的alignItems属性控制
1)alignItems的值是stretch时 高度为match_parent
2)当alignItems的值是auto,flex-start,flex-end,center时,高度为wrap_content