css 弹性盒子

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

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

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

        辅轴：垂直于主轴

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

        弹性盒子是代替浮动

弹性容器里面设置

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

          flex-direction

          取值：column 垂直方向 自上向下

                column-reverse 自下向上

                row 水平方向 自左向右 默认值

                row-reverse 自右向左

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

           justify-content

          取值：

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

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

             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-grow：默认值0

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

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

        flex-shrink：默认值0

        3.设置弹性元素的顺序

        order 值越大，排在后面

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