flex 布局

        //row  表示主轴为水平方向
        //column 表示主轴为垂直方向
        flex-direction: column;

        //主轴上的对齐方式在主轴的对齐方式 有 space-around space-between
        justify-content: center;
        justify-content: center;

        //在交叉轴上的对齐方式 单行
        align-items: center; 


        //是否换行
        flex-wrap: wrap;
        flex-wrap: nowrap;
        align-items: center;
        //交叉轴的多行对齐方式  有 space-around space-between
        align-content: space-evenly;
        align-items: center;

        //flex: 1  //分配剩余空间  1 表示把剩余空间都分完（只有一个项目需要分配）

         align-items: flex-end; //控制某一项目在交叉轴上的对齐方式 
         order: -1; 默认是0 //-1比0小所以提到前面