ReactNative-----flexbox布局

1. display：该属性用来元素指定元素是否为伸缩容器，语法为：display：flex  |  inline-flex

2. flex-direction : 该属性用于指定主轴的方向，语法为：flex-direction : row   | row-reverse   |    column-reverse

    row : (默认值) 伸缩容器若为水平方向轴，伸缩项目的排版为从左向右排列。

        flex--container{

            display : flex;

            flex-direction : row;               

        }                                                         

布局排列样式为：

    row-reverse: 伸缩同期为水平方向轴，绳索项目的排版方式为从右向左排列。

    

         flex--container{

            display : flex;

            flex-direction : row-reverse;               

        }       

布局排列样式为：

    

column: 伸缩容器若为垂直方向轴，伸缩项目的排版方式为从上到下排列。

    

         flex--container{

            display : flex;

            flex-direction : column;               

        }       

布局排列样式为：

column-reverse : 伸缩容器若为垂直方向轴，伸缩项目的排版方式为从下向上排列。

    

        flex--container{

            display : flex;

            flex-direction : column-reverse;               

        }

布局排列的样式为：

         

3. flex-wrap ： 该属性主要用来指定伸缩容器的主轴线方向控件不足的情况下，是否换行以及该如何换行 

                        语法为：flex-wrap :nowrap  |  wrap  |  wrap-reverse

nowrap  : （默认值） 即使空间不足，伸缩容器也不允许换行。

    flex-container{

        display : flex;

        flex-direction :row;

        flex-wrap；nowrap；

        width:200px;

        height:150px;

    }

    布局排列效果如下：

       

    wrap：伸缩容器在空间不足的情况下允许换行，主轴为水平轴，则换行的方向为从上到下。

        flex-container{

            display:flex

            flex-direction:row;

            flex-wrap:wrap;

            width:200px;

            height:150px;

        }

布局排列效果如下：

    

wrap-reverse: 伸缩容器在空间不足的情况下允许换行，若主轴为水平轴，则换行的方向为从下到上，（和wrap相反）

    flex-container{

        display: flex;

        flex-direction: row;

        flex-wrap:wrap-reverse;

        width:200px;

        height:150px;

    }

   布局排列效果如下：

        

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

    语法为：flex-flow: flex-direction  flex-wrap  

    flex-container{

        display:flex;

        flex-flow: row   wrap-reverse;

        width: 200px;

        height: 150px;

    }

    布局排列效果如下：（和上图的效果一致）

        

5. justify-content : 该属性用来定义伸缩项目沿主轴线的对齐方式，

        语法为：justify-content: flex-start | flex-start | flex-end | center | space-between | space-around

    flex-start: （默认值） 伸缩项目想主轴线的起始位置靠齐。

    flex-container{

        display:flex;

        flex-direction:row;

        justify-content:flex-start;

        width:200px;

        height:150px;

    }

布局排列效果如下显示：

    

flex-end : 伸缩项目向主轴线的结束位置靠齐。

flex-container{

    display:flex;

    flex-direction:row;

    justify-content:flex-end;

    width:200px;

    height:150px;

}

布局排列效果如下:

    

center: 伸缩项目向主轴的中间位置靠齐。

flex-container{

    display:flex;

    flex-direction:row;

    justify-content:center;

    width:200px;

    height:150px;   

}

布局排列效果如下显示：

    

space-between: 伸缩项目会平均地分布在主轴线里，第一个伸缩项目在主轴线的开始位置，最后一个伸缩项目在主轴的最终位置。

flex-container{

    display:flex;

    flex-direction:row;

    justify-content:space-between;

    width:200px;

    height:150px;

}

布局排列效果如下显示：

    

space-around：伸缩项目会平均地分布在主轴线里，两端保留一半的空间。

flex-container{

    display:flex;

    flex-direction:row;

    justify-content：space-around;

    width:200px;

    height:150px;

}

布局排列效果如下显示：