如果父元素設置了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'
}
效果圖
發(fā)現一個問題，設置了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是讓其所有的子元素在沿著與主軸垂直的軸方向排列（也叫次軸），即此時所有的子元素應該靠近次軸中心的位置，也就是垂直居中了！
