React Native 入门（九） - Flexbox 弹性盒子布局

当前 RN 版本：0.49
操作环境：Windows 10

React Native 使用 Flexbox 的规则来指定某个组件的子元素的布局方式，这种方式可以在不同屏幕尺寸的设备上提供一致的布局结构。React Native 中的 Flexbox 的工作原理和 web 上的 CSS 存在一定的差异：在 RN 中 flexDirection 的默认值是 column 而不是 row，而且 flex 只能指定一个值。

一般来说，使用 flexDirection、justifyContent 和 alignItems 三个样式属性就已经能满足大多数的布局需求。

Flex Direction

在组件的 style 属性中指定 flexDirection 可以决定布局的主轴。首先我们先通过一个简单的图形来了解一下主轴和侧轴。

RN 中默认的 flexDirection 是 column 纵向排列，这种情况下纵向就是主轴，横向是侧轴；将其改为 row 横向排列，横向就是主轴，纵向是侧轴。它一共有 4 个取值。

• column(default)：默认的排列方式，纵向由上到下。从屏幕顶部开始，方块 1 到方