CSS--flex布局、一般css书写顺序

        /* 父盒子常见属性 */
        
        .fa {
            display: flex;
            /* 设置主轴方向 flex-direction:row(从左到右（默认）)/row-reverse(从右到左)/column(从上到下)/column-reverse(从下到上)*/
            flex-direction: row;
            /* 设置主轴上子元素的排列方式 
            justify-content:flex-start(默认，从头部开始)/flex-end(从尾部开始)/center(在主轴居中)/space-around(平分剩余空间)/space-between(先两边贴边，再平分剩余空间) */
            justify-content: center;
            /* 设置子元素是否换行 默认不换
            flex-wrap:nowrap(不换行)/wrap(换行) */
            flex-wrap: wrap;
            /* 设置侧轴单行子元素排列方式 
            align-items:flex-start(从头部开始)/flex-end(从尾部开始)/center(居中)/strech(默认，拉伸，即子盒子不给高度时会拉得和父盒子一样高) */
            align-items: start;
            /* 设置侧轴多行子元素排列方式
            align-content:flex-start/flex-end/center/space-around(子项在侧轴平分剩余空间)/space-between(先两边贴边，再平分剩余空间)/strech */
            align-content: center;
            /* 复合写法：
                flex-flow: flex-direction flex-wrap*/
            height: 200px;
            background-color: pink;
        }
        /* 子盒子常见元素（其父盒子需要为flex布局） */
        
        .son1 {
            height: 50px;
            width: 70px;
            background-color: green;
            /* 定义子项目分配剩余空间，即占多少份数,使用后width/height属性失效,哪个失效取决于主轴方向 */
            flex: 3;
            /* 控制子项自己在侧轴的排列方式，允许单个项目和其他项目有不同的对齐方式，默认为auto（继承align-items/无父盒子则stretch），属性与父盒子等同
            align-self */
            align-self: flex-end;
            /* 定义项目排列顺序，数值越小越靠前 */
            order: 8;
        }
        
        .son2 {
            height: 60px;
            width: 50px;
            background-color: blue;
            flex: 7;
            order: 1;
        }
        
        .son3 {
            height: 40px;
            width: 80px;
            background-color: purple;
            order: 10;
        }

        /* 传统网页布局方式：普通流（标签按规定好的默认方法排列）、浮动、定位 */
        /* 块级元素的纵向排列-标准流 横向排序-浮动 */
        /* css属性书写顺序 */
        /* 1 布局定位: display/position/float/clear/visibility/overflow */
        /* 2 自身属性: width/height/margin/padding/border/background */
        /* 3 文本属性: color/font/text-decoration/text-aligin/vertical-align/while-space/break-word*/
        /* 4 其他属性: content/cursor/border-radius/box-shadow/text-shadow */