第5.4章：flex布局

2、Rn的Flex 布局教程

1. flexDirection决定元素的排列方向

   • column（默认）：竖直排列（上 -> 下）
   • row：水平排列（左 -> 右）

2. justifyContent 决定其子元素沿着水平（左 -> 右）排列方式

   • flex-start(默认)：位于容器的开头；

   • center：位于容器的中心；

   • flex-end：位于容器的结尾；

   • space-around：位于各行之前、之间、之后都留有空白的容器内；
     

     space-around

   • space-between：位于各行之间留有空白的容器内。
     

     space-between

alignItems（容器属性）

3. alignItems ——决定其子元素竖直（上 -> 下）的排列方式

   • flex-start(默认)：位于容器的开头；
   • center：位于容器的中心；
   • flex-end：位于容器的结尾；

flexWrap（容器属性）

4. flexWrap——控制换行（如果子View放不下，则自动换行）
   • nowrap(默认)：不自动换行
   • wrap：自动换行

flex（子元素属性）

5. 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