[Deep analysis react Native] React Native flexbox Attribute explanation _flex

React native, through a flexbox layout engine, implements a consistent cross-platform style and layout across all mobile platforms. Main Properties Flex flexdirection alignself alignitems justifycontent flexwrap Properties explain Flex

When an element defines a flex attribute, it means that the element is scalable (Flex has a property value greater than 0 to scale) and can be likened to the weight property in Android.

Class Flexboxreact extends Component {
  render () {return
    (
      <view style={styles.container}>
        < View style={styles.flex_style_1}><text> occupies 1/6</text></view>
        <view style={styles.flex_ Style_2}><text> occupies 1/3</text></view>
        <view style={styles.flex_style_3}><text> Account for 1/2</text></view>
      </View>
    )
  ;
}

Const STYLES = stylesheet.create ({
  container: {
    flex:1,
  },
  flex_style_1: {
    flex:1,
    BackgroundColor: ' Red '
  },
  flex_style_2: {
    flex:2,
    backgroundcolor: ' White '
  },
  flex_ Style_3: {
    flex:3,
    backgroundcolor: ' Blue '
  },
});

Effect Chart:
Flexdirection

Flexdirection has only two property values in react native, row (horizontal scaling) and column (vertical scaling), default to column:

Class Flexboxreact extends Component {
  render () {return
    (
      <view style={styles.container}>
        < View style={styles.flex_style_1}><text> occupies 1/6</text></view>
        <view style={styles.flex_ Style_2}><text> occupies 1/3</text></view>
        <view style={styles.flex_style_3}><text> Account for 1/2</text></view>
      </View>
    )
  ;
}

Const STYLES = stylesheet.create ({
  container: {
    flex:1,
    flexdirection: ' Row ',
  },
  flex_ Style_1: {
    flex:1,
    backgroundcolor: ' Red '
  },
  flex_style_2: {
    flex:2,
    BackgroundColor: ' White '
  },
  flex_style_3: {
    flex:3,
    backgroundcolor: ' Blue '
  },
};

The above code only modifies the container style:

  Container: {
    flex:1,
    flexdirection: ' Row ',
  },

Effect Chart:
Alignself

This usage is similar to Alignitems, except that it is used for the alignment of a single component alignself, which is used to set the vertical alignment of individual components, with four main types: Flex-start, flex-end, center, Auto, Stretch:flex-start: Aligns with the parent container header flex-end:flex-end: Align with the parent container at the end of center: in vertical position auto: Displays according to the width set by itself, if not set, the effect is the same as Streth Stretch: Vertical stretch

class FlexboxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.alignSelf_flexstart]}><Text>flex-start</Text></View>
        <View style={[styles.view, styles.alignSelf_flexend]}><Text>flex-end</Text></View>
        <View style={[styles.view, styles.alignSelf_center]}><Text>center</Text></View>
        <View style={[styles.view, styles.alignSelf_auto]}><Text>auto</Text></View>
        <View style={[styles.view, styles.alignSelf_stretch]}><Text>stretch</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  view: {
    flex: 1,
    backgroundColor: 'red',
    borderWidth: 1,
    borderColor: 'blue',
  },
  alignSelf_flexstart: {
    alignSelf: 'flex-start',
  },
  alignSelf_flexend: {
    alignSelf: 'flex-end',
  },
  alignSelf_center: {
    alignSelf: 'center',
  },
  alignSelf_auto: {
    alignSelf: 'auto',
  },
  alignSelf_stretch: {
    alignSelf: 'stretch',
  },
});

Alignitems

Used to define the alignment of a child component vertically. There are four properties to set: Flex-start,flex-end,center,stretch.
-Flex-start: First alignment with the parent component in the vertical direction
-Flex-end: Aligns the tail of the parent component in the vertical direction
-Center: In the middle position of the parent container in the vertical direction
-Stretch: Fills the entire container in the vertical direction

class FlexboxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.alignItems_flexstart]}>
          <Text style={styles.subView}>flex-start</Text>
        </View>
        <View style={[styles.view, styles.alignItems_flexend]}>
          <Text style={styles.subView}>flex-end</Text>
        </View>
        <View style={[styles.view, styles.alignItems_center]}>
          <Text style={styles.subView}>center</Text>
        </View>
        <View style={[styles.view, styles.alignItems_stretch]}>
          <Text style={styles.subView}>stretch</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  view: {
    flex: 1,
  },
  subView: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
    borderWidth: 1,
    borderColor: 'blue',
  },
  alignItems_flexstart: {
    alignItems: 'flex-start',
  },
  alignItems_flexend: {
    alignItems: 'flex-end',
  },
  alignItems_center: {
    alignItems: 'center',
  },
  alignItems_stretch: {
    alignItems: 'stretch',
  },
});

 

	
  


 

Justifycontent

Justifycontent and Alignitems are relative. It has five properties that can be set, respectively, Flex-start,flex-end,center,space-between,space-around. Flex-start: Telescopic Project aligns with the starting end of the parent container flex-end: Align with the end of the parent container Center: Horizontal Center Space-between: The first subassembly is at the start of the parent container, and the last subassembly is at the end of the parent container. The space-around is then evenly distributed horizontally in the parent container: All subcomponents are evenly distributed in the corresponding direction of the parent container, and there is a gap on both ends of the child component.

class FlexboxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.justifyContent_flexstart]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_flexend]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_center]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_between]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
        <View style={[styles.view, styles.justifyContent_around]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  view: {
    flex: 1,
    borderWidth: 1,
    borderColor: 'black',
  },
  subView: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
    borderWidth: 1,
    borderColor: 'blue',
  },
  justifyContent_flexstart: {
    justifyContent: 'flex-start',
  },
  justifyContent_flexend: {
    justifyContent: 'flex-end',
  },
  justifyContent_center: {
    justifyContent: 'center',
  },
  justifyContent_between: {
    justifyContent: 'space-between',
  },
  justifyContent_around: {
    justifyContent: 'space-around',
  },
});

 

	
  


 

Flexwrap

Flexwrap is used to set whether the line can be wrapped, there are two properties to set nowrap and wrap. NoWrap: Even if the space is not enough to change lines, can not be put out of overflow screen wrap: space is not enough words automatically line

class FlexboxReact extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.flexWrap_nowrap]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
          <Text style={styles.subView}>Item 4</Text>
          <Text style={styles.subView}>Item 5</Text>
          <Text style={styles.subView}>Item 6</Text>
        </View>
        <View style={[styles.view, styles.flexWrap_wrap]}>
          <Text style={styles.subView}>Item 1</Text>
          <Text style={styles.subView}>Item 2</Text>
          <Text style={styles.subView}>Item 3</Text>
          <Text style={styles.subView}>Item 4</Text>
          <Text style={styles.subView}>Item 5</Text>
          <Text style={styles.subView}>Item 6</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  view: {
    flex: 1,
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: 'black',
  },
  subView: {
    width: 80,
    height: 80,
    backgroundColor: 'red',
    borderWidth: 1,
    borderColor: 'blue',
  },
  flexWrap_nowrap: {
    flexWrap: 'nowrap',
  },
  flexWrap_wrap: {
    flexWrap: 'wrap',
  },
});

 

	
  


 

Reprint please mark address: Geek horse go Day
Follow personal Github:mazouri