布局 flex， justifyContent，alignContent

如果父元素设置了flex=1, 则会使得它的子元素扩张以撑满剩余的所有空间，并且子元素文字内容会显示在剩余空间的最下方。

Flex例子

.....................
  <View style={styles.bottomBtnView}>
            <Text style={styles.bottomLeftBtnView}>
              忘记密码？
            </Text>
            <Text>
              新用户注册
            </Text>
  </View>
CSS:
 bottomBtnView:{
    flex:1,
    flexDirection:'row',
    borderWidth:2,
    borderColor:'black',
  },
 bottomLeftBtnView:{
    borderWidth:2,
    borderColor:'red'
  }

效果如图

增加height

.....................
  <View style={styles.bottomBtnView}>
            <Text style={styles.bottomLeftBtnView}>
              忘记密码？
            </Text>
            <Text>
              新用户注册
            </Text>
  </View>
CSS:
 bottomBtnView:{
 //  height:20,
    flex:1,
   height:50,
    flexDirection:'row',
    borderWidth:2,
    borderColor:'blue',
  },
 bottomLeftBtnView:{
    borderWidth:2,
    borderColor:'red'
  }

效果图

发现一个问题，设置了height，但是好像并没有起作用，原因就是因为，一旦设置了flex，它的权重最高，就覆盖了height，而依然会撑满显示剩余空间。

去掉flex，保留height

代码同上，不同之处就是CSS部分：去掉flex，保留height

效果图

.....................
  <View style={styles.bottomBtnView}>
            <Text style={styles.bottomLeftBtnView}>
              忘记密码？
            </Text>
            <Text>
              新用户注册
            </Text>
  </View>
CSS:
 bottomBtnView:{
 //  height:20,
    flex:1,
   height:50,
    flexDirection:'row',
    borderWidth:2,
    borderColor:'blue',
    justifyContent:'flex-end'
  },
 bottomLeftBtnView:{
    borderWidth:2,
    borderColor:'red'
  }

效果图

justifyContent的作用就是决定设置了该属性的组件内包含的子元素的布局方向轴，即其是按照父元素设置的flexDirection 属性的值来决定自己应该按照那个方向轴排列，如果flexDirection=row, 则其所有的子元素按照行排列布局，即其所有的子元素都在同一行）
具体自行官网
如上效果图就是所有的子元素就是按照同一行排列，并且是靠近方向轴的末尾端。

如果想要元素垂直居中，则需要设置alignContent属性

给CSS部分：

  bottomBtnView:{
    height:50,
    flexDirection:'row',
    borderWidth:2,
    borderColor:'blue',
    justifyContent:'center',
    alignItems :'center'
  },
  bottomLeftBtnView:{
    borderWidth:2,
    borderColor:'red'
  }

效果图

则alignContent是让其所有的子元素在沿着与主轴垂直的轴方向排列（也叫次轴），即此时所有的子元素应该靠近次轴中心的位置，也就是垂直居中了！

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

布局 flex， justifyContent，alignContent