React-native 之 FlexBox 布局

React-native  的 flexbox 布局  ：

  display ： 用来指定容器是否为伸缩容器，其语法为    

  display ： flex  |  inline-flex   

  flex ： 表示块级=伸缩容器       

  inline-flex ： 表示 行内伸缩容器

 flex-direction :   row |  row-reverse    | column   |     column-reverse

row : 表示水平方向 ， 从左到右 

row-reverse : 表示水平方向 ， 从 右到左 

column ： 表示垂直方向 ，从上到下

coulnm-reverse ： 表示垂直方向 ， 从下到上

flex-wrap ： 表示当主线轴空间不足是要不要换行，该如何换行，

flex-wrap ： nowrap  |  wrap  |  wrap-reverse 

nowrap ： 表示伸缩空间，不换行

wrap ： 表示换行，换到第二行从左边开始

wrap-reverse ： 表示从上到下换行

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

flex-flow : flex-direction  flex-wrap

justify-content  : 用于定义伸缩项目沿主轴的对齐方式

justify-content :  flex-start  |  flex-end |  center |  space-between  |  space-around

flex-start :  伸缩项目沿主轴起始位置对齐

flex-end :  伸缩项目沿主轴结束位置对齐

center : 伸缩项目沿主轴中间位置对齐 

space-between :  伸缩项目沿主轴平均分配在两侧 ， 第一个在主轴的开始位置， 第二个在主轴的结束位置

space-around :  伸缩项目平均的分配在主轴里 ， 两端个保留一半的空间

align-items  :  用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式

align-items :  flex-start  |   flex-end   |   center  |   baseline    |  stretch 

flex-start   :  伸缩项目向交叉轴的起始位置靠齐

flex-end   :  伸缩项目向交叉轴的结束位置靠齐

center  : 伸缩项目向交叉轴的中间位置靠齐

baseline  ： 伸缩项目根据它们的基线对齐

stretch  ： 伸缩项目在交叉轴方向拉伸填充整个伸缩容器

align-content  :  表示伸缩项目在出现换行后在主线轴上的对齐方式

align-content  :   flex-start  |   flex-end   |   center  |  space-around    |  stretch  

align-start : 伸缩项目向交叉轴的起始位置靠齐

flex-end   :   伸缩项目向交叉轴的结束位置靠齐

cenetre  ： 伸缩项目向交叉轴的中间位置靠齐

space-around : 伸缩项目向交叉轴的平均分布

stretch ： 伸缩项目向交叉轴的方向伸展以占用剩余的空间

伸缩项目支持的属性 

order  ：   用于定义项目的排序的顺序 ，数值越小拍越前面 ， 默认值 为 0 

flex-grow  ：  定义伸缩项目的放大比例 ， 默认是  0    如果是为 1  则设置为一个大小相等的剩余空间 ，  如果为 2  则表示该空间是其他空间的2倍

fglx-shrink ： 定义项目的收缩比例  ， 默认值是 1 

flex-basis ： 定义伸缩项目的基准值 ，剩余的空间按比例进行伸缩

Flex 是 flex-grow  ， flex-shrink   ， flex-basis   三个属性的缩写 

flex : none  |  flex-grow  flex-shrink    flex-basis   其中第二个和第三个是可选参数  ， 这三个的默认值 是 0  ，  1    ，auto  

align-self ：  该属性用来设置单独的伸缩项目在交叉轴上的对其方式，会复写默认的对其方式，语法如下 ： 

align-self  :   auto  |  flex-start    |    flex-end    |   center   |  baseline      |      stretch      

auto  :  按照项目自身设置的宽高显示  

flex-start  :  伸缩项目向交叉轴的开始位置靠齐

flex-end ： 伸缩项目向交叉轴的结束位置靠齐

center  ：伸缩项目向交叉轴的中心位置靠齐

baseline :  伸缩项目按基线位置对齐

stretch ： 伸缩项目在交叉轴方向填充整个容器