React Native实战之flexbox布局(RN基础)

flexbox是Flexible Box的缩写，弹性盒子布局  主流的浏览器都支持

flexbox布局是伸缩容器(container)和伸缩项目(item)组成

Flexbox布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。
按照伸缩流的方向布局

伸缩容器有主轴和交叉轴组成！ 主轴既可以是水平轴，也可以是垂直轴

flexbox目前还处于草稿状态，所有在使用flexbox布局的时候，需要加上各个浏览器的私有前缀，即-webkit -moz -ms -o等

###伸缩容器的属性

1.display

  display:flex | inline-flex 

  块级伸缩容器   行内级伸缩容器

2.flex-direction

  指定主轴的方向 flex-direction:row（默认值）| row-reverse | column | column-reverse

3.flex-wrap

  伸缩容器在主轴线方向空间不足的情况下，是否换行以及该如何换行

  flex-wrap:nowrap（默认值） | wrap | wrap-reverse

4.flex-flow

是flex-direction和flex-wrap的缩写版本，它同时定义了伸缩容器的主轴和侧轴
，其默认值为 row nowrap

5.justify-content

用来定义伸缩项目在主轴线的对齐方式，语法为：
justify-content:flex-start（默认值） | flex-end | center | space-between | space-around

6.align-items

用来定义伸缩项目在交叉轴上的对齐方式，语法为：
align-items:flex-start（默认值） | flex-end | center | baseline | stretch

7.align-content

用来调整伸缩项目出现换行后在交叉轴上的对齐方式，语法为：
align-content:flex-start | flex-end | center | space-between | space-around | stretch（默认值）