flex弹性盒布局
要用flex布局很简单，只需要设置display: flex（块级元素） display: inline-flex（行内元素） 设置flex布局后 子元素float和 clear 就失效 绝对定位仍然有用 设置主轴方向，默认是flex-direction：row左到右 水平方向 （wrap换不换行，row主轴是水平，column主轴是垂直，reverse顺序颠倒）
flex-direction: row-reverse; 颠倒顺序 flex-direction: row;默认一行水平显示主轴水平 flex-direction: column;主轴变成垂直，上到下 flex-direction: column-reverse;主轴变成垂直，顺序颠倒 flex-wrap: nowrap;默认不换行 flex-wrap: wrap;自动换行
flext布局不像绝对定位，脱离文档流， flex布局这是了还是会遵守文档流布局
水平方向主轴上对齐方式：
justify-content：flex-start左对齐
justify-conten：flex-endt右对齐
定义了项目在主轴上的对齐方式（主轴是水平方向的），
所有jusitity-conten：centert表示水平方向居中
jusitify-comten：space-around每个项目两侧的间隔相等 ，
子元素相邻的距离是两侧的大1倍
justify-content：space-between两边对齐，项目之间的间隔相等
jusitift-conten：space-evenly子元素相邻的距离保持一致 项目在主轴上均匀分布，
收尾两端的自容器到父容器的距离跟自容器间的间距是一样的。
定义在交叉轴上的对齐方式（纵向水平） aling-items：center垂直方向居中 aling-items：flex-start垂直方向的顶部 （交叉轴的起点对齐） aling-items：flex-end垂直方向的底部 （交叉轴的终点对齐） aling-items：baseline垂直方向按照子元素的文字所在的底部位置进行对齐 aling-items：stretch默认值，如果项目未设置高度或设为auto，将沾满整个容器的高度
