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

Source: Internet
Author: User


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


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.