class FlexBoxDemo extends Component {
  render() {
    return(
        <View style={flexBoxStyle.flexBoxStyle}>
          <Text style={{width: 50,height: 50,backgroundColor: 'red',flex: 1}}>Text1</Text>
          <Text style={{width: 50,backgroundColor: 'green',flex: 1}}>Text2</Text>
          <Text style={{width: 50,backgroundColor: 'yellow',flex: 2}}>Text3</Text>
          {/*flex属相相当于Android中的权重就是所在父控件的比例比如Text4占父控件的七分之三
           alignSelf熟悉是相对于父控件的位置auto,center,flex-end,flex-start,stretch和alignItems属相意思相同*/}
          <Text style={{width: 50,backgroundColor: 'blue',flex: 3,alignSelf: 'flex-end'}}>Text4</Text>
        </View>
    );
  }
}

const flexBoxStyle = StyleSheet.create({
  flexBoxStyle: {
    marginTop: 20,flex: 1,//row,column,横向和竖向
    flexDirection: 'row',//space-between(两端固定),flex-start(固定在开始),flex-end(固定在结束),// center(固定在中间),space-around(两端大约是其它平分空间的二分之一)
    justifyContent: 'space-around',//flex-start(子控件在父控件的开始),flex-end(子控件在父控件的结束位置),center(子控件在中间),stretch(拉伸),alignItems: 'stretch',},});