# react native flex justifyContnt alignContent

**URL:** <https://www.shiqidu.com/t/topic/378>\
**Category:** 开发调优\
**Tags:** React-Native\
**Created:** [2018 年3 月 23 日 08:09 UTC](https://www.shiqidu.com/t/topic/378 "2018-03-23T08:09:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

作者： ![codeismoney](https://www.shiqidu.com/user_avatar/www.shiqidu.com/codeismoney/32/949_2.png) [@codeismoney](https://www.shiqidu.com/u/codeismoney)\
发布日期： [2018 年3 月 23 日 08:09 UTC](https://www.shiqidu.com/t/topic/378/1 "2018-03-23T08:09:38Z")

</div>

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

```auto
.....................  
  &lt;View style={styles.bottomBtnView}&gt;  
            &lt;Text style={styles.bottomLeftBtnView}&gt;  
              忘记密码？  
            &lt;/Text&gt;  
            &lt;Text&gt;  
              新用户注册  
            &lt;/Text&gt;  
  &lt;/View&gt;  
CSS:  
 bottomBtnView:{  
    flex:1,  
    flexDirection:\'row\',  
    borderWidth:2,  
    borderColor:\'black\',  
  },  
 bottomLeftBtnView:{  
    borderWidth:2,  
    borderColor:\'red\'  
  }  

```

 ![效果如图](https://discourse.shiqidu.com/uploads/default/original/1X/4a1c09b9f73e46dbe6005be98e38a13b9623616e.webp)

####增加height

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

```

 ![效果图](https://discourse.shiqidu.com/uploads/default/original/1X/69575e22fc7d5e500e7975344b668e79f78b0af2.webp)  
发现一个问题，设置了height，但是好像并没有起作用，原因就是因为，一旦设置了flex，它的权重最高，就覆盖了height，而依然会撑满显示剩余空间。

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

 ![效果图](https://discourse.shiqidu.com/uploads/default/original/1X/a5e318c692cf5dfc9356f57f32a5e993b7cfd3e2.webp)

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

```

 ![效果图](https://discourse.shiqidu.com/uploads/default/original/1X/81548ce307654f5ae0797166b5edcb287e44b098.webp)  
justifyContent的作用就是决定设置了该属性的组件内包含的 **子元素** 的布局方向轴，即其是按照父元素设置的flexDirection 属性的值来决定自己应该按照那个方向轴排列，如果flexDirection=row, 则其所有的子元素按照行排列布局，即其所有的子元素都在同一行）  
[具体自行官网](https://reactnative.cn/docs/0.51/layout-with-flexbox.html#content)  
如上效果图就是所有的子元素就是按照同一行排列，并且是靠近方向轴的末尾端。

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

给CSS部分：

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

```

 ![效果图](https://discourse.shiqidu.com/uploads/default/original/1X/5cadaf78ba685864b68224e8b6dca554c8a27cc8.webp)  
则alignContent是让其所有的子元素在沿着与主轴垂直的轴方向排列（也叫次轴），即此时所有的子元素应该靠近次轴中心的位置，也就是垂直居中了！

---

<div class="post-metadata">

作者： ![yeqiu](https://www.shiqidu.com/user_avatar/www.shiqidu.com/yeqiu/32/14_2.png) [@yeqiu](https://www.shiqidu.com/u/yeqiu)\
发布日期： [2018 年3 月 23 日 10:03 UTC](https://www.shiqidu.com/t/topic/378/2 "2018-03-23T10:03:35Z")

</div>

多谢分享，flex布局的确是好用。