3, hands-on teaching react native actual combat flexbox layout

Last Update:2016-04-10 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Flexbox is the abbreviation for flexible box, and the mainstream browser of the flexible box layout supports

The Flexbox layout is a telescopic container (container) and a scaling item (item)

The main idea of the Flexbox layout is that elements can be resized to fit the available space, and when the available space becomes larger, the flex element will stretch to fill the available space and will shrink automatically when the flex element exceeds the free space. In short, the flex element allows you to automatically scale your layout according to the size of the browser.

Layout according to the direction of the telescopic flow

The telescopic container consists of a spindle and a cross axis! The spindle can be either a horizontal axis or a vertical axis

Flexbox is still in draft state, all when using flexbox layout, need to add each browser's private prefix, namely-WEBKIT-MOZ-MS-O, etc.

# # #Flex container properties

1.display

Display:flex | Inline-flex

Block-level telescopic container in-line telescopic container

2.flex-direction

Specifies the direction of the spindle flex-direction:row (default) | Row-reverse | Column | Column-reverse

3.flex-wrap

If the telescopic container has insufficient space in the main axis direction, whether to wrap and how to break the line

Flex-wrap:nowrap (default value) | Wrap | Wrap-reverse

4.flex-flow

is an abbreviated version of Flex-direction and Flex-wrap, which defines both the spindle and the side axis of the telescopic container.
, whose default value is row nowrap

5.justify-content

Used to define the alignment of the scaling item on the main axis, the syntax is:
Justify-content:flex-start (default value) | Flex-end | Center | Space-between | Space-around

6.align-items

Used to define the alignment of the scaling item on the intersection axis, with the following syntax:
Align-items:flex-start (default value) | Flex-end | Center | Baseline | Stretch

7.align-content

Used to adjust the alignment of the scaling item on the intersection after a line break appears, the syntax is:
Align-content:flex-start | Flex-end | Center | Space-between | Space-around | Stretch (default value)

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "utf-8" />
  <title> Centering an Element on the Page </ title>
  
  <style type = "text / css">
      html {
  height: 100%;
}

body {
  display: -webkit-box; / * Old version syntax: Safari, iOS, Android browser, older WebKit browsers. * /
  display: -moz-box; / * Old version syntax: Firefox (buggy) * /
  display: -ms-flexbox; / * Mixed version syntax: IE 10 * /
  display: -webkit-flex; / * New version syntax: Chrome 21+ * /
  display: flex; / * New version syntax: Opera 12.1, Firefox 22+ * /

  / * Vertical centering * /
  / * Old version syntax * /
  -webkit-box-align: center;
  -moz-box-align: center;
  / * Mixed version syntax * /
  -ms-flex-align: center;
  / * New version syntax * /
  -webkit-align-items: center;
  align-items: center;

  / * Center horizontally * /
  / * Old version syntax * /
  -webkit-box-pack: center;
  -moz-box-pack: center;
  / * Mixed version syntax * /
  -ms-flex-pack: center;
  / * New version syntax * /
  -webkit-justify-content: center;
  justify-content: center;

  margin: 0;
  height: 100%;
  width: 100% / * needed for Firefox * /
}


/ * Achieve vertical text centering * /
h1 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 10rem;
}

  </ style>
  
  
</ head>


<body>
  <h1> OMG, I ’m centered </ h1>
</ body>
</ html>

### Expanding project properties

1.order

Define the order of items. The smaller the number, the higher the order. The default value is 0. The syntax is: order: an integer value.

2.flex-grow

Defines the magnification ratio of the flex item. The default value is 0, which means that if there is remaining space, it will not be enlarged. The syntax is: flex-grow: integer value

3.flex-shrink

Defines the shrinking ability of the flex item. The default value is 1 and its syntax is: flex-shrink: integer value

4.flex-basis

It is used to set the baseline value of the scaling item. The remaining space is scaled according to the ratio. The syntax is: flex-basis: length | auto. The default value is auto.

5.flex

It is an abbreviation of the three attributes of flex-grow flex-shrink flex-basis, and its syntax is: flex: none | flex-grow flex-shrink flex-basis, where the second and third parameters are optional parameters, default Value: 0 1 auto

6.align-self

Used to set the alignment of individual telescopic items on the cross axis, which will override the default alignment. The syntax is: align-self: auto | flex-start | flex-end | center | baseline | stretch The axis direction fills the telescopic container. If the cross axis is vertical, the effect can only be seen without setting the height.)

### Using flexbox in React Native

RN currently supports the following six attributes of flexbox:

1.alignItems

It is used to define the alignment of the telescopic items on the cross axis. The syntax is:
alignItems: flex-start (default) | flex-end | center | stretch

2.alignSelf

It is used to set the alignment of the individual telescopic items on the cross axis, which will override the default alignment. The syntax is: alignSelf: auto | flex-start | flex-end | center | stretch (The telescopic items are full in the cross axis direction. Telescopic container, if the cross axis is vertical, the effect can only be seen if the height is not set)

3.flex

It is an abbreviation of the three attributes of flex-grow flex-shrink flex-basis, and its syntax is: flex: none | flex-grow flex-shrink flex-basis, where the second and third parameters are optional parameters, default Value: 0 1 auto

4.flexDirection

Specify the direction of the main axis flex-direction: row | row-reverse | column (default) | column-reverse

5.flexWrap

6.justifyContent

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "utf-8" />
  <title> Second flexbox example </ title>
  
  <style type = "text / css">
      html {
  height: 100%;
}

body {
  display: -webkit-box; / * Old version syntax: Safari, iOS, Android browser, older WebKit browsers. * /
  display: -moz-box; / * Old version syntax: Firefox (buggy) * /
  display: -ms-flexbox; / * Mixed version syntax: IE 10 * /
  display: -webkit-flex; / * New version syntax: Chrome 21+ * /
  
  display: flex; / * New version syntax: Opera 12.1, Firefox 22+ * /

flex-flow: row nowrap;




    / * Vertical centering * /
  / * Old version syntax * /
  -webkit-box-align: center;
  -moz-box-align: center;
  / * Mixed version syntax * /
  -ms-flex-align: center;
  / * New version syntax * /
  -webkit-align-items: center;
  align-items: center;

  / * Center horizontally * /
  / * Old version syntax * /
  -webkit-box-pack: center;
  -moz-box-pack: center;
  / * Mixed version syntax * /
  -ms-flex-pack: center;
  / * New version syntax * /
  -webkit-justify-content: center;
  justify-content: center;




  margin: 0;
  height: 100%;
  width: 100% / * needed for Firefox * /
  
 
}

# box1 {
    background: red;
    height: 100px;
    width: 80px;
    
    
}
# box2 {
    background: yellow;
    
    width: 80px;
    align-self: stretch;
   

}
# box3 {
    background: green;
     height: 100px;
    width: 80px;
    align-self: stretch;
   
    
}


  </ style>
  
  
</ head>


<body>
  
  
  <div id = "box1"> First </ div>
  <div id = "box2"> The second </ div>
  <div id = "box3"> The third </ div>
  
  
</ body>
</ html>

## 3. Supporting video (): https://yunpan.cn/cY4JGpecp5K7c Access password b832

## 4. Supporting video (): https://yunpan.cn/cYIG6dCUNIRkB Access password d6b6

Box model display with HTML5 and React Native

The writing is different: 1. style 2. element 3. writing format

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .height50 {
        height: 50px;
      }
      .height400 {
        height: 400px;
      }
      .height300 {
        height: 300px;
      }
      .height200 {
        height: 200px;
      }
      .height100 {
        height: 100px;
      }
      .width400 {
        width: 400px;
      }
      .bgred {
        background-color: #6AC5AC;
      }
      .bggreen {
        background-color:  #414142;
      }
      .bgyellow {
        background-color: #D64078;
      }
      .box {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
        color: #FDC72F;
        line-height: 1em;
      }
      .label {
        top: 0;
        left: 0;
        padding: 0 3px 3px 0;
        position: absolute;
        background-color: #FDC72F;
        color: white;
        line-height: 1em;
      }
      .top {
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
      }
      .bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .right {
        width: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .left {
        width: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .heightdashed {
        position: absolute;
        right: 20px;
        height: 100%;
        border-left: 1px solid #FDC72F;
      }
      .widthdashed {
        position: absolute;
        left: 0px;
        width: 100%;
        bottom: 24px;
        border-top: 1px solid #FDC72F;
      }
      .margginBox {
        position:absolute;
        top: 100px;
        padding-left:7px;
        padding-right:7px;
      }
      .borderBox {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .paddingBox {
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .elementBox{
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .measureBox {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
    </style>
  </head>
  <body>
    <span class="margginBox">
      <span class="box height400  width400">
        <span class="label">
          margin
        </span>
        <span class="top height50 bgred">
          top
        </span>
        <span class="borderBox">
          <span class="left bgred">
            left
          </span>
          <span class="box height300  ">
            <span class="label">
              border
            </span>
            <span class="top height50 bggreen">
              top
            </span>
            <span class="paddingBox">
              <span class="left bggreen">
                left
              </span>
              <span class="box height200  ">
                <span class="label">
                  padding
                </span>
                <span class="top height50 bgyellow">
                  top
                </span>
                <span class="elementBox">
                  <span class="left bgyellow">
                    left
                  </span>
                  <span class="box height100  ">
                    <span class="label">
                      element
                    </span>
                    <span class="widthdashed">
                    </span>
                    <span class="heightdashed">
                    </span>
                    <span class="measureBox">
                      <span class="right">
                        height
                      </span>
                    </span>
                    <span class="bottom  height50">
                      width
                    </span>
                  </span>
                  <span class="right bgyellow">
                    right
                  </span>
                </span>
                <span class="bottom  height50 bgyellow">
                  bottom
                </span>
              </span>
              <span class="right bggreen">
                right
              </span>
            </span>
            <span class="bottom  height50 bggreen">
              bottom
            </span>
          </span>
          <span class="right bgred">
            right
          </span>
        </span>
        <span class="bottom  height50 bgred">
          bottom
        </span>
      </span>
    </span>
  </body>
</html>
  

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
‘use strict‘;
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from ‘react-native‘;

class DongFang extends Component {
  render() {
    return (
        <View style={[BoxStyles.margginBox]}  ref="lab1">
          <View style={[BoxStyles.box,BoxStyles.height400,BoxStyles.width400]}>
            <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}>
              <Text style={BoxStyles.yellow}>top</Text></View>
            <View style={[BoxStyles.borderBox]}>
              <View style={[BoxStyles.left,BoxStyles.bgred]} >
                <Text style={BoxStyles.yellow}>left</Text></View>
              <View style={[BoxStyles.box,BoxStyles.height300]}>
                <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bggreen]}>
                  <Text style={BoxStyles.yellow}>top</Text></View>
                <View style={[BoxStyles.paddingBox]}>
                  <View style={[BoxStyles.left,BoxStyles.bggreen]} >
                    <Text style={BoxStyles.yellow}>left</Text></View>
                  <View style={[BoxStyles.box,BoxStyles.height200]}>
                    <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgyellow]}>
                      <Text style={BoxStyles.yellow}>top</Text></View>
                    <View style={[BoxStyles.elementBox]}>
                      <View style={[BoxStyles.left,BoxStyles.bgyellow]} >
                        <Text style={BoxStyles.yellow}>left</Text></View>
                      <View style={[BoxStyles.box,BoxStyles.height100]}>
                        <View  style={[BoxStyles.label]}>
                          <Text style={BoxStyles.white}>element</Text></View>
                        <View style={[BoxStyles.widthdashed]} ></View>
                        <View style={[BoxStyles.heightdashed]} ></View>
                        <View style={[BoxStyles.measureBox]} >
                          <View style={[BoxStyles.right]}>
                            <Text style={[BoxStyles.yellow]}>height</Text></View>
                        </View>
                        <View style={[BoxStyles.bottom,BoxStyles.height50]}>
                          <Text style={BoxStyles.yellow}>width</Text></View>
                      </View>
                      <View style={[BoxStyles.right,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>right</Text></View>
                    </View>
                    <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgyellow]}>
                      <Text style={BoxStyles.yellow}>bottom</Text></View>
                    <View style={[BoxStyles.label]}>
                      <Text style={BoxStyles.white}>padding</Text></View>
                  </View>
                  <View style={[BoxStyles.right,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>right</Text></View>
                </View>
                <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bggreen]}>
                  <Text style={BoxStyles.yellow}>bottom</Text></View>
                <View style={[BoxStyles.label]}><Text style={BoxStyles.white}>border</Text></View>
              </View>
              <View style={[BoxStyles.right,BoxStyles.bgred]}>
                <Text style={BoxStyles.yellow}>right</Text></View>
            </View>
            <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgred]}>
              <Text style={BoxStyles.yellow}>bottom</Text></View>
            <View style={[BoxStyles.label]} ><Text style={BoxStyles.white}>margin</Text></View>
          </View>
        </View>
    );
  }
}

const BoxStyles = StyleSheet.create({
  height50:{
    height: 50,
  },
  height400:{
    height: 400,
  },
  height300:{
    height: 300,
  },
  height200:{
    height: 200,
  },
  height100:{
    height: 100,
  },
  width400:{
    width: 400,
  },
  width300:{
    width: 300,
  },
  width200:{
    width: 200,
  },
  width100:{
    width: 100,
  },
  bgred: {
    backgroundColor:‘#6AC5AC‘,
  },
  bggreen: {
    backgroundColor: ‘#414142‘,
  },
  bgyellow: {
    backgroundColor: ‘#D64078‘,
  },
  box: {
    flexDirection: ‘column‘,
    flex: 1,
    position: ‘relative‘,
  },
  label: {
    top: 0,
    left: 0,
    paddingTop: 0,
    paddingRight: 3,
    paddingBottom: 3,
    paddingLeft: 0,
    position: ‘absolute‘,
    backgroundColor: ‘#FDC72F‘,
  },
  top: {
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
  },
  bottom: {
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
  },
  right: {
    width: 50,
    justifyContent: ‘space-around‘,
    alignItems: ‘center‘,
  },
  left: {
    width: 50,
    justifyContent: ‘space-around‘,
    alignItems: ‘center‘,
  },
  heightdashed: {
    bottom: 0,
    top: 0,
    right: 20,
    borderLeftWidth: 1,
    position: ‘absolute‘,
    borderLeftColor: ‘#FDC72F‘,
  },
  widthdashed: {
    bottom: 25,
    left: 0,
    right: 0,
    borderTopWidth: 1,
    position: ‘absolute‘,
    borderTopColor: ‘#FDC72F‘,
  },
  yellow: {
    color: ‘#FDC72F‘,
    fontWeight:‘900‘,
  },
  white: {
    color: ‘white‘,
    fontWeight:‘900‘,
  },
  margginBox:{
    position: ‘absolute‘,
    top: 100,
    paddingLeft:7,
    paddingRight:7,
  },
  borderBox:{
    flex: 1,
    justifyContent: ‘space-between‘,
    flexDirection: ‘row‘,
  },
  paddingBox:{
    flex: 1,
    justifyContent: ‘space-between‘,
    flexDirection: ‘row‘,
  },
  elementBox:{
    flex: 1,
    justifyContent: ‘space-between‘,
    flexDirection: ‘row‘,
  },
  measureBox:{
    flex: 1,
    flexDirection: ‘row‘,
    justifyContent: ‘flex-end‘,
    alignItems:‘flex-end‘,
  },
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
  welcome: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
  },
  instructions: {
    textAlign: ‘center‘,
    color: ‘#333333‘,
    marginBottom: 5,
  },
});

AppRegistry.registerComponent(‘DongFang‘, () => DongFang);

## 5. Supporting video (): https://yunpan.cn/cYIGk4LBKw4y6 Access password fd93

3.Teach the flexbox layout of React Native in action

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

3, hands-on teaching react native actual combat flexbox layout

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

3, hands-on teaching react native actual combat flexbox layout

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support