CSS：弹性盒子布局 display: flex ；

设置主轴方向

        flex-direction : row ；默认主轴方向是X轴

        flex-direction : row-reverse ；设置主轴方向是X轴，方向相反

        flex-direction : column ；设置主轴为Y轴

        flex-direction : column-reverse ；设置主轴方向是Y轴，方向相反

设置主轴的排列方式

        justify-content :  flex-start ； 默认的排列方式

        justify-content :  flex-end ；设置主轴排列方式为尾部

        justify-content :  space-between；两端分布，中间元素均等分

        justify-content :  space-around ；有居中效果，每个元素两边的距离等分

        justify-content :  space-evenly ； 有居中效果，间隙等分

        justify-content :  center ； 居中排列

设置纵轴的排列方式

        align-items : flex-start ;    默认的排列方式

        align-items : flex-end ;   设置纵轴排列方式为尾部

        align-items : center ;  居中排列

设置元素是否换行（换行）

        flex-warp ：warp ;   自动换行

        flex-warp ：nowarp ;   不换行