FlexBox布局初识 - 主轴和侧轴

CSS布局有“盒子模型”，依赖 display属性 ， position属性， float属性。但对于那些特殊布局非常不方便，比如，垂直居中。

一种全新的针对web和移动开发布局应运而生：Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

FlexBox布局大部分情况下是处理图中FlexItem在FlexContainer中的位置和尺寸关系（下图）:

主轴和侧轴
在CSS中，常规的布局是基于块和内联流方向，而Flex布局是基于flex-flow流,下图很好解释了Flex布局的思想：

看图2个flex item（图上标示1和2）是横向排列的，这样的布局下，横向（x方向）就是 “主轴”，纵向（x方向）就是“侧轴”。

同理，如果是flex item纵向排列的，那么y方向就是“主轴”，x方法就是“侧轴”。如下图：

Flexbox的常用属性
flexDirection: 该属性决定主轴的方向（即项目的排列方向）
先来看一下当前的布局

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class FlexBoxDemo extends Component {  render() {    return (      <View style={styles.container}>        <View style={styles.innerView}>          <Text>我是里面View的文本</Text>        </View>        <View style={styles.innerView2}>          <Text>我是里面第二个View</Text>        </View>      </View>    );  }}const styles = StyleSheet.create({  container: {    // flex: 1,    backgroundColor: '#F5FCFF',    width:300,    height:100  },  innerView: {    backgroundColor:'green',    width:100  },  innerView2: {    backgroundColor:'yellow',    width:100  }});AppRegistry.registerComponent('FlexBoxDemo', () => FlexBoxDemo);

效果如下图：

从上图可以看出：主轴的方向是纵向的（也就是Y轴方向），下面我们要改变一下主轴的方向啦。
修改container样式:

修改之后效果：