FlexBox总结

FlexBox弹性布局是React Native中的布局，功能丰富，能够满足页面大量的排版需求。RN的FlexBox和Html5的差别不大，原理基本相同。

它拥有三个属性 flexDirection、justifyContent、alignItems

flexDirection

flexDirection是确定子元素的主轴方向，是沿着水平轴还是垂直轴排列，默认值是column。

有四个属性值:

• row：水平从左往右
• row-reverse：水平从右往左
• column：垂直从上往下
• column-reverse：垂直从下往上。

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // 尝试把`flexDirection`改为`column`看看
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'green'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
      </View>
    );
  }
};

justifyContent

justifyContent是确定子元素在主轴上的对齐方式

有下面几个属性值：

• flex-start：沿着主轴确定的方向，起始点对齐排列（默认值）
• center：沿着主轴确定的方向，居中对齐排列
• flex-end：沿着主轴确定的方向，终点对齐排列
• space-around：沿着主轴确定的方向，元素均分排列，每个元素周围分配相同的空间
• space-between：沿着主轴确定的方向，元素均分排列，两端对齐
• space-evenly：沿着主轴确定的方向，元素均分排列，每个元素之间的间隔相等

<View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
}}>
    <View style={{width: 50, height: 50, backgroundColor: 'red'}}/>
    <View style={{width: 50, height: 50, backgroundColor: 'green'}}/>
    <View style={{width: 50, height: 50, backgroundColor: 'blue'}}/>
</View>

alignItems

alignItems是与主轴垂直的轴的对齐方式

有下面几个属性值：

• flex-start：和垂直轴方向，起点对齐排列
• flex-end：和垂直轴方向，终点对齐排列
• center：和垂直轴方向，居中对齐排列
• baseline：和垂直轴方向，基线对齐
• stretch：当元素没有设置（宽）高度，或者（宽）高度为auto，会撑满（默认值）

<View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: "stretch"
}}>
    <View style={{width: 50, height: 200, backgroundColor: 'red'}}/>
    <View style={{width: 50, height: 200, backgroundColor: 'green'}}/>
    <View style={{width: 50, height: 200, backgroundColor: 'blue'}}/>
</View>

说了这麽多，这不是LinearLayout和RelativeLayout的结合体吗