flex布局

设置弹性盒子布局  display: flex;

flex-direction:设置主轴方向 

    1. flex-direction: column;   //主轴就是从上到下的垂直方向

    2. flex-direction: row;    //主轴就是从左到右的水平方向,默认值

    3. flex-direction: column-reverse;     //主轴是从下到上的垂直方向

    4. flex-direction: row-reverse;    //主轴就是从右往左的水平方向

justify-content: 设置主轴方向对齐方式 

   1. justify-content: flex-start;   //默认值，项目从主轴起点开始对齐，不留间隙

   2.  justify-content: flex-end;   //从主轴重点对齐，不留间隙

   3. justify-content: center;   //主轴上居中对齐，不留间隙

   4. justify-content: space-around;   //每个项目之间的距离相等

   5. justify-content: space-between;   //两端对齐

align-items:设置项目在交叉轴上的对齐方式 

    1.align-items: center;   //交叉轴居中对齐

    2.align-items: flex-start;   //项目定点与交叉轴对齐

    3.align-items:  flex-end;   //项目底部与交叉轴终点对齐

    4.align-items: baseline;   //项目的第一行文字基线对齐

.box:nth-child(5) {

    background-color: aqua;

}