React Native学习笔记（3）--FlexBox

React 学习笔记

一、FlexBox

FlexBox（弹性盒子布局），它是为了简单快速地完成各种伸缩性的设计而提出来的。它可以为传统的盒子模型布局带来更大的灵活性。目前主流的浏览器都已经支持它了。

1、布局模型

flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局，只要设置display的属性为flex或inline-flex即可。伸缩容器的子元素就成为伸缩项目，伸缩项目使用伸缩布局模型来排版。

默认情况下，伸缩容器由两根轴（主轴：main axis；交叉轴：cross axis）组成。

名称 英文 主轴 Main Axis 交叉轴 Cross Axis 主轴开始位置 Main Start 主轴结束位置 Main End 交叉轴开始位置 Cross Start 交叉轴结束位置 Cross End

（1）FlexBox伸缩容器的属性

定义伸缩容器

 display : `-moz-box` | `-webkit-box` | `-ms-flexbox` | ` -webkit-flex` | `flex`

• 水平轴（主轴）对齐方式

  -moz-box-pack : flex-start | flex-end | center | space-between | space-ground;

  -webkit-box-pack : flex-start | flex-end | center | space-between | space-ground;

  -ms-flex-pack : flex-start | flex-end | center | space-between | space-ground;

  -webkit-justify-content : flex-start | flex-end | center | space-between | space-ground;

  justify-content : flex-start | flex-end | center | space-between | space-ground;

• 垂直轴（交叉轴）对齐方式

  -moz-box-align: flex-start | flex-end | center | space-between | baseline | stretch;

  -webkit-box-align: flex-start | flex-end | center | space-between | baseline | stretch;

  -ms-flex-align: flex-start | flex-end | center | space-between | baseline | stretch;

  -webkit-align-items: flex-start | flex-end | center | space-between | baseline | stretch;

  align-items: flex-start | flex-end | center | space-between | baseline | stretch;

• 主轴的方向

  flex-direction ： row | row-reverse | column | column-reverse

  row : 从左到右;

  row-reverse : 从右到左;

  column : 从上到下;

  column-reverse : 从下到上

• 是否换行

  flex-wrap : wrap | nowrap | wrap-reverse

• 伸缩方向和是否换行简写

  flex-flow : row | row-reverse | column | column-reverse | wrap | nowrap | wrap-reverse

• 换行后的对齐方式

  align-content: flex-start | flex-end | center | space-between | space-ground | stretch;

（2）FlexBox伸缩项目的属性

• 项目排序

  order : [整数] 默认值为0

• 项目放大能力（当存在多余空白时占用空白的比例，比例相对于同级项目）

  flex-grow : [整数] 默认值为0

• 项目收缩能力（当项目大小大于容器是，项目的压缩比例，比例相对于同级项目）

  flex-shrink : [整数] 默认值为1，若项目的flex-shrink为2，那么在压缩时这个项目就会变成其他项目的二分之一，如果flex-shrink值为0，那么即使在空间不足需要压缩的情况下，该项目的宽度会保持初始大小不变，其他的则会压缩

• 项目基准值(项目的宽度，会覆盖项目的width)

  flex-basis : [整数]px | auto 默认值为:auto

• flex

  项目放大能力、收缩能力、基准值的简写

  flex : none | flex-grow flex-shrink flex-basis 默认值为:0 1 auto

• 项目在交叉轴上的对齐方式

  项目在交叉轴上的的对齐方式，会覆盖项目所在容器的交叉轴（崔志洲）对齐方式

  align-self : auto | flex-start | flex-end | center | space-between | baseline | stretch;

（3）React Native中目前主要支持的FlexBox属性

• alignItems : flex-start(默认值) | flex-end | center | stretch;

  容器交叉轴的对齐方式，没有baseline属性

• alignSelf : auto | flex-start | flex-end | center | stretch;

  项目交叉轴的对齐方式，会覆盖容器的交叉轴对齐方式，没有baseline属性

• flex : none | flex-grow flex-shrink flex-basis 默认值为:0 1 auto

  放大能力，收缩能力，基准值的简写

• flexDirection ： row | row-reverse | column(默认值) | column-reverse

  主轴的方向

• flexWrap

  属性同上

• justifyContent

  属性同上

基准线 : 项目第一行文字的起始线

2、React-Native FlexBox实例

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,    Image,    TouchableHighlight,    TouchableOpacity} from 'react-native';export default class Hello extends Component{  render(){    return (        <View style={[FlexStyle.margginBox]} ref="lab1">          <View style={[FlexStyle.box, FlexStyle.height400, FlexStyle.width400]}>            <View style={[FlexStyle.top, FlexStyle.height50, FlexStyle.bgred]}>              <Text style={FlexStyle.yellow}>top</Text>            </View>            <View style={[FlexStyle.borderBox]}>              <View style={[FlexStyle.left, FlexStyle.bgred]}>                <Text style={FlexStyle.yellow}>left</Text>              </View>              <View style={[FlexStyle.right, FlexStyle.bgred]}>                <Text style={FlexStyle.yellow}>right</Text>              </View>            </View>            <View style={[FlexStyle.bottom, FlexStyle.bgred, FlexStyle.height50]}>              <Text style={FlexStyle.yellow}>bottom</Text>            </View>            <View style={[FlexStyle.label]}>              <Text style={FlexStyle.white}>marggin</Text>            </View>          </View>        </View>    );  }}const FlexStyle = StyleSheet.create({  height50 : {    height : 50  },  height400 : {    height : 400  },  width400 : {    width : 400  },  bgred : {    backgroundColor : "#6AC5AC"  },  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"  },  yellow : {    color : "#FDC72F",    fontWeight : "900"  },  white:{    color : "white",    fontWeight : "900"  },  margginBox : {    position : "absolute",    top : 100,    paddingRight : 7,    paddingLeft: 7,  },  borderBox : {    flex:1,    justifyContent : "space-between",    flexDirection:"row"  }});AppRegistry.registerComponent('Hello', () => Hello);