3、手把手教React Native实战之flexbox布局

flexbox是Flexible Box的缩写，弹性盒子布局  主流的浏览器都支持

flexbox布局是伸缩容器(container)和伸缩项目(item)组成

Flexbox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。

按照伸缩流的方向布局

伸缩容器有主轴和交叉轴组成！主轴既可以是水平轴，也可以是垂直轴

flexbox目前还处于草稿状态，所有在使用flexbox布局的时候，需要加上各个浏览器的私有前缀，即-webkit -moz -ms -o等

###伸缩容器的属性

1.display

  display:flex | inline-flex

  块级伸缩容器   行内级伸缩容器

2.flex-direction

  指定主轴的方向 flex-direction:row（默认值）| row-reverse | column | column-reverse

3.flex-wrap

  伸缩容器在主轴线方向空间不足的情况下，是否换行以及该如何换行

  flex-wrap:nowrap（默认值） | wrap | wrap-reverse

4.flex-flow

是flex-direction和flex-wrap的缩写版本，它同时定义了伸缩容器的主轴和侧轴
，其默认值为 row nowrap

5.justify-content

用来定义伸缩项目在主轴线的对齐方式，语法为：
justify-content:flex-start（默认值） | flex-end | center | space-between | space-around

6.align-items

用来定义伸缩项目在交叉轴上的对齐方式，语法为：
align-items:flex-start（默认值） | flex-end | center | baseline | stretch

7.align-content

用来调整伸缩项目出现换行后在交叉轴上的对齐方式，语法为：
align-content:flex-start | flex-end | center | space-between | space-around | stretch（默认值）

<!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;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */
  display: -moz-box;    /* 老版本语法: Firefox (buggy) */ 
  display: -ms-flexbox;  /* 混合版本语法: IE 10 */
  display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
  display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */

  /*垂直居中*/    
  /*老版本语法*/
  -webkit-box-align: center; 
  -moz-box-align: center;
  /*混合版本语法*/
  -ms-flex-align: center; 
  /*新版本语法*/
  -webkit-align-items: center;
  align-items: center;

  /*水平居中*/
  /*老版本语法*/
  -webkit-box-pack: center; 
  -moz-box-pack: center; 
  /*混合版本语法*/
  -ms-flex-pack: center; 
  /*新版本语法*/
  -webkit-justify-content: center;
  justify-content: center;

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


/*实现文本垂直居中*/
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>

###伸缩项目的属性

1.order

定义项目的排列顺序，数值越小，排列越靠前，默认值为0，语法为：order：整数值

2.flex-grow

定义伸缩项目的放大比例，默认值为0，即表示如果存在剩余空间，也不放大，语法为：flex-grow：整数值

3.flex-shrink

定义伸缩项目的收缩能力，默认值为1 ，其语法为：flex-shrink:整数值

4.flex-basis

用来设置伸缩项目的基准值，剩余的空间按比率进行伸缩，其语法为：flex-basis:length | auto，默认值为auto

5.flex

是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flex-basis，其中第二个和第三个参数为可选参数，默认值为：0 1 auto

6.align-self

用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：align-self:auto | flex-start | flex-end | center | baseline | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的话，只有在不设置高度的情况下才能看到效果)

###在React Native中使用flexbox

RN目前主要支持flexbox的如下6个属性：

1.alignItems

用来定义伸缩项目在交叉轴上的对齐方式，语法为：
alignItems:flex-start（默认值） | flex-end | center | stretch

2.alignSelf

用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：alignSelf:auto | flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的话，只有在不设置高度的情况下才能看到效果)

3.flex

是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flex-basis，其中第二个和第三个参数为可选参数，默认值为：0 1 auto

4.flexDirection

指定主轴的方向 flex-direction:row| row-reverse | column（默认值） | column-reverse

5.flexWrap

6.justifyContent

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

body {
  display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */
  display: -moz-box;    /* 老版本语法: Firefox (buggy) */ 
  display: -ms-flexbox;  /* 混合版本语法: IE 10 */
  display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
  
  display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */

flex-flow:row nowrap;




    /*垂直居中*/    
  /*老版本语法*/
  -webkit-box-align: center; 
  -moz-box-align: center;
  /*混合版本语法*/
  -ms-flex-align: center; 
  /*新版本语法*/
  -webkit-align-items: center;
  align-items: center;

  /*水平居中*/
  /*老版本语法*/
  -webkit-box-pack: center; 
  -moz-box-pack: center; 
  /*混合版本语法*/
  -ms-flex-pack: center; 
  /*新版本语法*/
  -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">第一个</div>
  <div id="box2">第二个</div>
  <div id="box3">第三个</div>
  
  
</body>
</html>

##3、配套视频(下载地址)：https://yunpan.cn/cY4JGpecp5K7c 访问密码 b832

##4、配套视频(下载地址)：https://yunpan.cn/cYIG6dCUNIRkB 访问密码 d6b6

用HTML5和React Native分别实现盒子模型显示

写法不一样：1.样式 2.元素 3.书写格式

<!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、配套视频(下载地址)：https://yunpan.cn/cYIGk4LBKw4y6 访问密码 fd93

来源：http://www.cnblogs.com/dfy888/p/5374329.html

标签

flexbox

交叉轴

react

position

box

display

webkit