FlexBox布局

http://reactnative.cn/docs/0.50/layout-with-flexbox.html#content *
http://www.jianshu.com/p/f4c1a35af92a *
http://www.jianshu.com/p/31248003f375 *
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ***

“弹性布局”，旨在通过弹性的方式，来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。大部分情况是处理父控件与子控件的位置更新

主要思想是：让容器有能力让其子控件能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间。

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

一般用法

display:flex

可以使组件在可利用的空间中，动态地扩张或收缩，以指定弹性的宽、高。

• 使用flex:1来指定某个组件扩张，以撑满所有剩余的空间。
• 如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。
• 如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）
• 前提：其父容器的尺寸不为零

flexDirection

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列。其值如下：

row: 主轴为水平方向，起点为左端
row-reverse: 主轴为水平方向，起点在右端
column：主轴为竖直方向，起点在上沿。（默认）
column-reverse：主轴为竖直方向，起点在下沿

QQ.png

当View包含View1，和View2的时候，

1，若子控件未设height，则会与父控件的高度相同；
2，若子控件未设width，则会按照控件中的内容进行宽度设置（例如按照文字的总高度）

flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

justifyContent

在组件的style中指定justifyContent，可以决定其子元素沿着 主轴 的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：

flex-start、center、flex-end、space-around、space-between

QQ.png

alignContent

决定其子元素沿着 交叉轴 的排列方式，其值有：

flex-start、center、flex-end、space-around、space-between

QQ.png

aligItems

在组件的style中指定alignItems，可以决定其子元素沿着 次轴（与主轴垂直的轴）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：

flex-start、center、flex-end、stretch。其中，要使stretch生效，子元素在次轴方向上不能有固定的尺寸。
flex-start：交叉轴开端；center：交叉轴的中间位置；flex-end：交叉轴的末端位置

QQ.png

aligSelf

alignSelf决定了元素，在父元素的次轴方向的排列方式（此样式设置在子元素上），其值会覆盖父元素的alignItems的值。

flexWrap

包含内容，默认值是nowrap，不包裹所有内容。其值如下：

nowrap：沿主轴方向布局，超出容器长度的部分不可见
wrap：沿主轴布局所需长度大于容器总长度时，分行布局，所有项目内容都可见

QQ.png

position

控件在父控件中的位置关系
其值如下：
relative：弹性布局，自动填充
absolute：为绝对布局，一般会与left和top属性一起使用。有时候我们需要实现某些项目重叠起来，absolute属性就能发挥作用了。

margin

外边距
marginVertical、marginHorizontal

padding

内边距
paddingTop、paddingBottom、paddingLeft、paddingRight