弹性布局

痘痘安

        /*
        弹性布局
            1.什么是弹性布局
                一种布局方式，主要解决某个元素中字元素的布局方式
                为布局提供了很大的灵活性
            2.弹性布局的相关概念
                1.容器
                当一个元素被设置为display：flex ，这个元素称为弹性布局的容器，容器内部都按照弹性布局的方式排列。
                要发生弹性布局的元素，他们的父元素称为容器，也就是设置了display：flex的元素
                2.项目
                要发生弹性布局的子元素们，称为弹性项目。
                就是设置了display：flex元素的子元素们
                3.主轴
                项目们的排列方向的一条轴，称之为主轴
                项目们横向排列，主轴就为x轴
                项目们纵向排列，主轴就为y轴
                项目们在主轴上的排列顺序，称为主轴起点和终点
                4.交叉轴
                与主轴方向垂直相交的一条轴，称为交叉轴
                项目们在交叉轴上的排列方式，称为交叉轴的起点于终点
            3.语法
                display：flex；-----让块级元素变为容器
                inline-flex；
                将元素变为弹性容器，它所有子元素都将变成弹性项目
                    注意：
                    1.元素设置为容器之后
                    元素的text-align，vertial-align无效
                    只能使用主轴和交叉轴的属性来设置子元素对齐方式
                    2.弹性项目，浮动，清除浮动失效
            4.容器的属性
            ①主轴方向
            flex-direction：row 默认值，主轴x轴，主轴起点左侧
                            row-reverse 主轴x轴，主轴起点右侧
            flex-direction：column 主轴是y轴，主轴起点为顶部
                            column-reverse 主轴是y轴，起点是底部
            ②空间不够，项目是否换行
            flex-wrap：nowrap 默认值，项目不换行
                       wrap 换行
                       wrap-reverse 换行并反转
            ③上面两个属性的简写
            flex-flow：direction主轴方向 wrap换行
            ④项目在主轴上的排列方向
            justify-content：flex-start 默认值。主轴起点对齐
                             flex-end 主轴的终点对齐
                             center 主轴的中间对齐
                             space-around 每个项目左右间距一致
                             space-between 左右两端对齐
            ⑤项目在交叉轴上的对齐方式
            align-items：flex-start 默认值，交叉轴起点对齐
                         flex-end 交叉轴终点对齐
                         center 交叉轴中间对齐
                         stretch 前提，项目不设置高度，项目占满交叉轴上所有空间

        */