弹性盒子.

1.弹性盒子
      概念:是一种新的布局方式，主要是让元素有能力控制子元素的排列方式。常用语移动端

    1.容器上的属性
          1.设置成容器
              disolay:flex 丨 inline-flex;   [flex是弹性盒子,inline-flex是行内块弹性盒子]

          2.设置主轴的方向
              flex-direction:row 丨 column 丨row-reverse 丨 column-reverse;
              row 横    column 竖

          3.设置项目在主轴上的排列方式
               justify-content:flex-start 丨 center 丨 flex-end 丨 space-between 丨 space-around 丨 space-evenly
               flex-start     主轴起点
               center         中间点
               flex-end       主轴终点
               space-between  间隔在之间
               space-around   间隔在周围
               space-evenly   间隔均分

          4.设置项目在侧轴上的排列方式
               align-items: stretch 丨 flex-start 丨 flex-end 丨 center 丨 baseline;

          5.设置项目是否换行
               flex-wrap: nowrap 丨 wrap 丨 wrap-reverse
               nowrap: 不换行，项目超出容器宽度就自动缩小
               wrap:   项目超出容器宽度就换行

          6.多跟轴上的排列方式
               align-content: stretch 丨 flex-start 丨 center 丨 flex-end 丨 space-between 丨 space-around 丨 space-evenly;
                 注意:单根轴无效 

          7.主轴方向和是否换行的复合属性
               flex-flow: 主轴的方向     是都换行的值

    2.项目上的属性
          1.项目的排序
              order:数字     (默认为0,排序从小到大,可正可负)

          2.项目是否缩小
              flex-shrink:数字;
                  默认为1，代表会缩小。如果值为0代表不缩小。
                  如果值为，代表要缩小的份数。
                 【具体所有的值=(需要缩小的宽度/所有项目的shrink的总和)*当前项目shrink的值】

          3.项目是否放大
              flex-grow:数字
                  默认为0,不放大.如果值为1,代表会放大,
                  值为其它的数字,代表放大的份数

          4.项目的基本尺寸
              flex-basis:*px;
                   [含义几乎等于宽度]

          5.项目的复合属性
              flex:flex-grow   flex-shrink  flex-basis
              flex:0 代表 0      1         auto
              flex:1 代表 1      1         auto     

          6.项目单独的排列方式
            align-self: flex-start 丨 center 丨 flex-end