美文网首页
布局 flex, justifyContent,alignCon

布局 flex, justifyContent,alignCon

作者: 吧啦啦小汤圆 | 来源:发表于2018-03-23 16:08 被阅读58次

如果父元素设置了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是让其所有的子元素在沿着与主轴垂直的轴方向排列(也叫次轴),即此时所有的子元素应该靠近次轴中心的位置,也就是垂直居中了!

相关文章

  • 布局 flex, justifyContent,alignCon

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

  • 【React Native学习笔记四】flex布局基础

    flex布局基础——flexDirection、alignItems、justifyContent 一、flex布...

  • React Native屏幕适配

    http://www.imooc.com/code/2054 flex css 布局 justifyContent...

  • flex布局

    认识flex布局 flex布局(Flexible 布局,弹性布局)开启了flex布局的元素叫flex contai...

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

  • Flex 布局教程

    一、Flex 布局教程:语法篇 Flex 布局教程:语法篇 二、Flex 布局教程:实例篇 Flex...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • Flex

    阮一峰-Flex布局 阮一峰-Flex布局实例教程 Flex布局 块级元素 行内元素 注意,设为 Flex 布局...

  • flex布局学习笔记

    经典教程 Flex 布局教程:语法篇Flex 布局教程:实例篇flex布局游戏 理解 flex布局实现需要至少两层...

  • 6Flex 布局

    Flex,(Flexible Box),意为"弹性布局"采用 Flex 布局的元素,为 Flex 容器(flex ...

网友评论

      本文标题:布局 flex, justifyContent,alignCon

      本文链接:https://www.haomeiwen.com/subject/sndxcftx.html