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

<!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

###在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

3、手把手教React Native实战之flexbox布局的更多相关文章

4、手把手教React Native实战之flexbox布局(伸缩属性)
###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...
6、手把手教React Native实战之JSX入门
React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架,React Native是ReactJS思想在native上的体现! JSX并不是一 ...
5、手把手教React Native实战之盒子模型BoxApp
用HTML5和React Native分别实现盒子模型显示写法不一样: 1.样式 ![样式不同](http://image17-c.poco.cn/mypoco/myphoto/20160323/0 ...
2、手把手教React Native实战之从React到RN
###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...
1、手把手教React Native实战之环境搭建
React Native 的宗旨是,学习一次,高效编写跨平台原生应用. 在Windows下搭建React Native Android开发环境 1.安装jdk 2.安装sdk 在墙的环境下,为了 ...
0、手把手教React Native实战之开山篇
##作者简介东方耀 Android开发 RN技术 facebook github android ios 原生开发 react reactjs nodejs 前端 ...
8、手把手教React Native实战之ReactJS组件生命周期
1.创建阶段 getDefaultProps:处理props的默认值在React.createClass调用 2.实例化阶段 React.render(<HelloMessage 启动之后 g ...
7、手把手教React Native实战之ReactJS
ReactJS核心思想:组件化维护自己的状态和UI 自动重新渲染多个组件组成了一个ReactJS应用 React是全局对象顶层API与组件API React.createClass创建组 ...
React Native入门认识Flexbox布局
Flexbox布局是由W3C在09年提出的在Web端取代CSS盒子模型的一种布局方式. ReactNative实现了Flexbox布局的大部分功能. Flexbox布局所使用的属性,基本可以分为两大类 ...

随机推荐

C中的空宏定义，即只有一个参数
空宏定义的测试代码 #include <stdio.h> #define D(x) int main() { D(printf("null macro")); retu ...
Django内置过滤器详解附代码附效果图--附全部内置过滤器帮助文档
前言基本环境 Django版本:1.11.8 Python版本:3.6 OS: win10 x64 本文摘要提供了常用的Django内置过滤器的详细介绍,包括过滤器的功能.语法.代码和效果示例. ...
Markdown 11种基本语法【转】
[转自:http://www.cnblogs.com/hnrainll/p/3514637.html] 1. 标题设置(让字体变大,和word的标题意思一样)在Markdown当中设置标题,有两种方式 ...
【转】Visual Studio常用快捷键
Shift+Alt+Enter: 切换全屏编辑 Ctrl+B,T / Ctrl+K,K: 切换书签开关 Ctrl+B,N / Ctrl+K,N: 移动到下一书签 Ctrl+B,P: 移动到上一书签 ...
C语言 · 求指数
算法训练 5-2求指数时间限制:1.0s 内存限制:256.0MB 问题描述已知n和m,打印n^1,n^2,...,n^m.要求用静态变量实现.n^m表示n的m次方.已知n和m, ...
C语言 · 2的次幂表示 · 幂方分解
蓝桥杯练习场上有两个此类题目: 算法训练幂方分解时间限制:1.0s 内存限制:256.0MB 锦囊1 递归. 锦囊2 使用一个函数,递归的进行分解,每次分解的时候要将数字先转 ...
数据结构——算法之（043）（c++各种排序算法实现）
[申明:本文仅限于自我归纳总结和相互交流,有纰漏还望各位指出. 联系邮箱:Mr_chenping@163.com] 题目: c++ 各种排序算法实现题目分析: 详细排序原理參考相关算法书籍算法实现 ...
PHPstorm8 自动换行设置方法
PHPstorm是一款非常不错的PHP开发工具,有很多需要自己设置.比如,IDE常见的代码自动换行功能需要我们自己去配置才能实现. File -> Settings -> Editor ...
node-webkit读取json文件
1.原理 node-webkit包含了node.js,node.js提供了处理json数据文件的方法,通过node.js提供的方法,我们可以比较方便地读取json文件. 2.示例这里我们读取的文件是 ...
js学习笔记18----元素创建操作
1.父级.appendChild(新的元素) 从后面开始追加子元素. 2.父级.insertBefore(新的元素,被插入的元素) 在指定元素前面开始插入一个新元素. 兼容性:在ie下,如果第二个参数 ...

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

3、手把手教React Native实战之flexbox布局的更多相关文章

随机推荐

热门专题