2、Rn的Flex 布局教程
-
flexDirection决定元素的排列方向-
column（默认）：竖直排列（上 -> 下） -
row：水平排列（左 -> 右）
-
-
justifyContent决定其子元素沿着水平（左 -> 右）排列方式flex-start(默认)：位于容器的开头；center：位于容器的中心；flex-end：位于容器的结尾；-
space-around：位于各行之前、之间、之后都留有空白的容器内；
space-around -
space-between：位于各行之间留有空白的容器内。
space-between
alignItems（容器属性）
-
alignItems——决定其子元素竖直（上 -> 下）的排列方式-
flex-start(默认)：位于容器的开头； -
center：位于容器的中心； -
flex-end：位于容器的结尾；
-
flexWrap（容器属性）
-
flexWrap——控制换行（如果子View放不下，则自动换行）-
nowrap(默认)：不自动换行 -
wrap：自动换行
-
flex（子元素属性）
-
flex——权重，分配主轴上剩余的空间<View style={{flexDirection: 'row'}}> <Text style={{width: 60,height: 80,flex: 1}}/> <Text style={{width: 60,height: 80}}/> <Text style={{width: 60,height: 80}}/> <Text style={{width: 60,height: 80}}/> </View>
image
