弹性盒子布局 display: flex ;

flex-direction : 设置主轴方向

row ：默认主轴方向是X轴

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

column ：设置主轴为Y轴

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

justify-content : 设置主轴的排列方式

flex-start : 默认的排列方式

flex-end ：设置主轴排列方式为尾部

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

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

space-evenly ： 有居中效果，间隙等分

center : 居中排列

align-items : 设置纵轴的排列方式

flex-start ：默认的排列方式

flex-end ：设置纵轴排列方式为尾部

center ：居中排列

flex-warp ：设置元素是否换行（换行）