弹性盒子

flex(弹性盒子，伸缩盒)
    -是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局
    -flex可以使元素具有弹性，让元素可以根据页面的大小的改变而改变
    -弹性容器
      -要使用弹性盒，必须先将一个元素设置为弹性容器
      -通过display来设置弹性容器
          display:flex  设置块级弹性容器
          display:inline-flex 设置为行内的弹性容器
    -弹性元素
      -弹性容器的直接子元素是弹性元素（弹性项）
    注意：一个元素可以同时是弹性容器和弹性元素
一:弹性容器的属性
    1:flex-direction    2:flex-wrap 
    3:flex-flow        4:justify-content
    5:align-items     6:align-content

1:flex-direction: ; 指定容器中弹性元素的排列方式
    可选值：
      row  默认值，弹性元素在容器中水平排列（左向右）
          主轴-自左向右
      row-reverse  弹性元素在容器中反向水平排列（右向左）
          主轴-自右向左
      column  弹性元素纵向排列（自上向下）
          主轴-自上向下
      column-reverse 弹性元素纵向排列（自下向上）
          主轴-自下向上
  
    主轴：弹性元素的排列方向称为主轴
    侧轴：与主轴垂直方向的称为侧轴

弹性容器属性

1: flex-direction:;
2: flex-wrap: ;设置弹性元素是否在弹性容器中是否自动换行
    可选值： 
    nowrap 默认值，元素不会自动换行
    wrap 元素沿着辅轴方向自动换行   
    wrap-reverse 元素沿着辅轴反方向换行  
3:flex-flow:wrap和direction的简写属性，且没有顺序要求
    默认值 row  nowrap
4:justify-content 如何分配主轴上的空白空间（主轴上的元素如何排列）
    可选值：
        flex-start 元素沿着主轴起边排列
        flex-end 元素沿着主轴终边排列
        center  元素居中排列
        space-around 空白分布到元素的两侧
        space-between 空白均匀分布到元素间
        space-evenly 空白分布到元素的单侧（兼容性差一些） 

1: flex-direction: row;
  2:flex-wrap:wrap-reverse; 
  3: flex-flow:row wrap;
  4: justify-content:space-around;
  5: align-items 在辅轴上如何对齐-元素间的关系
        可选值：
            stretch  默认值，将同一行元素的长度设置为相同的值
            flex-start 元素不会拉伸， 沿着辅轴起边对齐
            flex-end   元素不会拉伸， 沿着辅轴终边对齐
            center  居中对齐
            baseline 基线对齐（用的不对）
  6: align-content: ;辅轴空白空间的分布 
        可选值：
            flex-start 元素沿着辅轴起边排列
            flex-end 元素沿着辅轴终边排列
            center  元素居中排列
            space-around 空白分布到元素的两侧
            space-between 空白均匀分布到元素间
            space-evenly 空白分布到元素的单侧（兼容性差一些）