前言：本文最好在在理解了flextBox和margin、padding后观看。这篇是对margin、padding解释比较详细和直观的，而这篇是对flex的解释。
问题场景：距屏幕左边距16显示title，距title右边距16显示content,且content的右边距屏幕16。理想的显示应该是图2的这个样子： 但实际显示content却没有显示出来，见图1。原因是对于content的style我们并没有说明具体的宽度，虽然我们设置了marginLeft和marginRight,但是并没有按照我们理想的要求显示出来，原因就是我们没有说明content的宽度。我们可以将下面的styles中content的flex设置为1就可以了，即使我们的content为空字符串但content依然可以展示出来（见图2）
图1：
图2：
下面是错误代码
render(){ return( <View style={styles.container}>
<Text style={styles.title}>{'标题一'}</Text>
<Text style={styles.content}>''</Text>
</View>) }
const styles = StyleSheet.create({
container:
{minHeight:44,backgroundColor:'white',flexDirection:'row'},
title: {fontSize:FontSize.P1,width:92,color:'#191919',marginLeft:16,backgroundColor:'yellow',},
content:{marginLeft:16,marginRight:16,fontSize:FontSize.P1,color:'#191919',height:40,backgroundColor:'red',},
})
