React-native之Flexbox布局（2）

一.简介

我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。
Flexbox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。伸缩容器有主轴和交叉轴组成！ 主轴既可以是水平轴，也可以是垂直轴。

二.属性 （最常用的是前三个）

• alignItems

可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式，语法为：
alignItems: flex-start（默认值） | flex-end | center | stretch

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。

• justifyContent

可以决定其子元素沿着主轴的排列方式。语法为：
justifyContent: flex-start、center、flex-end、space-around以及space-between

• flexDirection

可以决定布局的主轴，默认是竖轴。语法为：
flexDirection: column（默认值） | row | row-reverse | column-reverse

• alignSelf
  用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式。语法为：
  alignSelf: auto | flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的话，只有在不设置高度的情况下才能看到效果)
• flex
  是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：
  flex: none | flex-grow flex-shrink flex-basis，其中第二个和第三个参数为可选参数，默认值为：0 1 auto