ReactNative FlexBox布局简述

关于FlexBox布局，我的理解上，先确定以谁为主，谁未次，然后根据主次方向开始布局。

ReactNative中文网文档：http://reactnative.cn/docs/0.46/layout-with-flexbox.html#content

根据官方文档总结：
React Native中使用flexbox规则来指定某个组件的子元素的布局，flexbox布局样式有三种，flexDirection、justifyContent和alignItems。

1.flexDirection（确定主轴）：在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

2.justifyContent（主轴排列方式）：在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。
⭐️ 对应的属性值有：flex-start、center、flex-end、space-around以及space-between
△ flex-start：

0DC282EC-6C43-4119-AD38-BB2530184100.png

△ center：

10A3A908-DDC5-4E83-88AF-1526E82666E6.png

△ flex-end：

C2372D7B-0DD3-4469-B6F1-1EA961D46D4C.png

△ space-around：

D870F570-0999-4170-AB7D-5B22B3B2F611.png

△ space-between：

0F21203D-E805-47BE-857C-0524A667F06A.png

3.Align Items（次轴排列方式）：在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。
⭐️ 对应的属性值有：flex-start、center、flex-end以及stretch。

==》因为ReactNative默认主轴是column方向。所以以下示例主轴是默认方向。

ADE03FD9-CC82-4BD9-B887-E9B84C1B9CCD.png

6B71B6FF-1A9A-4D6B-8B8A-27814AF50BD0.png