flexbox布局

flexbox  弹性盒子，布局是按权重进行分配。可以自行进行拉伸与扩展

flex布局分为两类，

     1. flex容器   flexContainer

     2. flex子类   flexItem

flex box布局分为两个轴：

     1.水平（主轴）    main axis

     2.垂直   cross axis

最外层的叫  flexContainer

里边的子view 叫 flexItem

主轴的起点叫 main start

最右边的点叫 main end

十字轴最上边的点叫 cross start

十字轴最下边的点叫 cross end

如下图：

flex:1,表示占满整个屏幕。

如果想让子视图横向显示 可以设置  display:flex 或者是inline-flex，之后变为行内元素

flex-direction,设置的是main axis，也就是主轴的方向。

    1.row:水平方向  row-reverse:水平倒置

    2.column 垂直方向  column-reverse：垂直倒置

flex-wrap 系统默认的项目会在同一行显示

     1.nowrap 不换行

     2.wrap    自动换行   wrap-reverse：颠倒排列

flex-flow 集合了 flex-direction  flex-wrap

      应用实例：flex-flow：row-reverse  wrap

justify-content  （水平方向）调整项目位置以及项目与项目之间的间隔。默认为flex-start

      flex-start：左边显示

      flex-end：右边显示

      center：居中显示

      space-around：项目中间添加间隔 铺满整个屏幕，同时会在项目的周围添加一些间隔

      space-between：项目中间添加间隔 铺满整个屏幕

align-items  （垂直方向）

       stretch：拉伸项目高度，让他跟容器的高度一样（系统默认）

       flex-start：靠容器最上端（垂直轴的起点）

       flex-end：靠容器最下端（垂直轴的终点）

       center：靠容器中间（垂直轴的中间）

       baseline：基线对齐，靠cross轴的最上边显示，会根据项目的不同高度调整对齐的方式

align-content  （多行）

       stretch：不同行项目拉伸对齐（系统默认）

       flex-start：cross轴起点，不拉伸

       flex-end：cross轴终点，不拉伸

       center：cross轴终点，不拉伸

       space-around：项目的周围添加一些间隔，间隔取决于容器剩余的空间

       space-between：项目中间添加间隔 铺满整个屏幕

order （控制容器项目里面的顺序）默认为0

       当order：1，会排在最后

       当order：-1，会排在最前

flex-grow  利用容器剩下的水平空间

        flex-grow：1   所有容器都一样

        flex-basis：auto （默认） 100，初始化的宽度都为100

        flex-shrink：0  不让项目随屏幕的宽度缩小而缩小

        flex-shrink：3   比其他项目更容易缩小（比1大的正数）

也可以这样用

flex:0  1 auto ;   第一个为flex-grow   第二个为flex-shrink  第三个为flex-basis

align-self  单独设置某一个项目

        auto：

        flex-end：某一项目靠下显示

        flex-search：拉伸显示

        center:居中显示

margin:10,表示四周边距为10。

text 不支持backgroundColor，只支持color，也就是字体颜色。