html新布局display:flex的常用用法
写在容器（父元素）身上的属性
1、声明弹性盒子
display: flex;
display:inline-flex;
2、设置在主轴的排列方式 写在父元素
justify-content:flex-start; 左上角开始 默认值
justify-content:flex-end; 右上角开始
justify-content:center; 居中显示
justify-content:space-between; 两端对齐，中间自动分配
justify-content:space-around; 每个项目左右间隔一致
justify-content:space-evenly; 每个项目的间隔一样
3、设置主轴方向（主轴默认是横轴）写在父元素
flex-direction:row; 横轴（从前往后）
flex-direction:row-reverse; 横轴（从后往前）
flex-direction:column; 竖轴（从上到下）
flex-direction:column-reverse; 竖轴（从下到上）
4、交叉轴的排列方式(写在父元素上)
align-items:stretch; 默认值 高度铺满父元素
align-items：flex-start 最顶部
align-items：flex-end 最底部
align-items：center 垂直居中显示
align-items：baseline 基线对齐
5、多行排列方式(写在父元素上)
align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-around;
align-content:space-between;
写在容器（父元素）身上的属性
1、声明弹性盒子
display: flex;
display:inline-flex;
2、设置在主轴的排列方式（写在父元素上）
justify-content:flex-start; 左上角开始 默认值
justify-content:flex-end; 右上角开始
justify-content:center; 居中显示
justify-content:space-between; 两端对齐，中间自动分配
justify-content:space-around; 每个项目左右间隔一致
justify-content:space-evenly; 每个项目的间隔一样
3、设置主轴方向（主轴默认是横轴）写在父元素
flex-direction:row; 横轴（从前往后）
flex-direction:row-reverse; 横轴（从后往前）
flex-direction:column; 竖轴（从上到下）
flex-direction:column-reverse; 竖轴（从下到上）
4、交叉轴的排列方式(写在父元素上)
align-items:stretch; 默认值 高度铺满父元素
align-items：flex-start 最顶部
align-items：flex-end 最底部
align-items：center 垂直居中显示
align-items：baseline 基线对齐
5、多行排列方式
align-content:flex-start;
align-content:flex-end;
align-content:center;
align-content:space-around;
align-content:space-between;
6、一行排不下 是否换行（默认是收缩显示 不换行）
flex-wrap：nowrap（不换行 默认值）
flex-wrap：wrap 换行
写在项目身上（子元素）属性
1、定义项目的顺序
order： 2; 数字越大 就越靠后
2、设置单个项目在交叉轴的排列（和上面多行排列同理，就写进示例里了）
align-self:flex-start;
align-self:flex-end;
align-self:center;
3、项目放大 (子元素总宽小于父元素时放大)
flex-grow：1； 数字是份数 默认值0
4、项目的缩小（子元素总宽大于父元素时缩小）
flex-shrink：1； 默认值是1（收缩） 0 不收缩