html+css---flex(弹性盒)

弹性容器：元素设置display: flex;

        弹性元素：弹性容器的子元素

        主轴：弹性元素的排列方向

        辅轴：垂直于主轴

        注意：一个元素既可以是弹性容器，也可以是弹性元素

        弹性盒子是代替浮动

     -->

    <!-- 弹性容器里面设置

        1.设置弹性元素的在弹性容器排列方向：

## flex-direction

          取值：

                        row 水平方向 自左向右 默认

                        column 垂直方向 自上向下

                        column-reverse 自下向上

                        row-reverse 自右向左

       **2**.设置主轴空白空间的分布：

## justify-content

          取值：

             center： 是弹性元素在主轴居中显示

             flex-start：是弹性元素在主轴开始处排列

             flex-end：是弹性元素在主轴结束处排列

             space-between：是空白空间平均分布在弹性元素之间，弹性元素与弹性容器之间没有距离

             space-around：是空白空间平均分布在弹性元素二侧，弹性元素与弹性容器之间有距离

             space-evenly：是空白空间平均分布在弹性元素一侧，弹性元素与弹性容器之间有距离

       **3**.设置弹性元素在辅轴的排列方式 辅轴单行或单列

## align-items

            取值：

               center 辅轴居中

               flex-end 辅轴结束

               flex-start 辅轴开始

       **4**.设置弹性元素是否转行

## flex-wrap

            取值：

              nowrap 默认值 不转行

              wrap 转行

              wrap-reverse 反向转行

       **5**.设置辅轴空白空间的分布：

## align-content

        取值：

             center： 是弹性元素在辅轴居中显示

             flex-start：是弹性元素在辅轴开始处排列

             flex-end：是弹性元素在辅轴结束处排列

             space-between：是空白空间平均分布在弹性元素之间，弹性元素与弹性容器之间没有距离

             space-around：是空白空间平均分布在弹性元素二侧，弹性元素与弹性容器之间有距离

             space-evenly：是空白空间平均分布在弹性元素一侧，弹性元素与弹性容器之间有距离

      -->

    <!-- 弹性元素

        1.设置弹性元素扩大系数，当弹性容器的主轴宽度>弹性元素时，

        注意：弹性元素实际占用空间与系数和基础长度有关

## flex:1；平均非配

## flex-grow：默认值0

        2.设置弹性元素缩小系数，当弹性容器的主轴宽度<弹性元素时，

        注意：弹性元素实际占用空间与系数和基础长度有关

## flex-shrink：默认值0

        3.设置弹性元素的顺序

## order 值越大，排在后面

         注意：设置order属性的弹性元素在没有设置order属性大弹性元素后面排列