##弹性布局
弹性盒模型 伸缩盒模型 flex box --默认子元素不换行
1.给父元素设置display:flex --是块级元素
*父元素没高度--高度不会塌陷 默认子元素 横向/水平排列
*弹性布局是一维布局 主轴：默认水平 可以改变轴的方向 变成垂直方向
*父元素有高度和子元素没有高度时，子元素会继承父元素高度
*父元素和子元素都有高度时，听子元素高度
*子元素width之和不超过父元素时，就是子元素的width 当之和超过父元素是，则进行压缩平分父元素width
2.给父元素设置display:inline-flex --是行内元素
改变轴的方向 -默认为row
flex-direction:row; 轴为水平方向
flex-direction:row-reverse; 颠倒顺序 并且在轴的结束位置
flex-direction:column;轴为垂直方向
换行 -- flex-wrap
flex-wrap:wrap; 换行 --变成多轴
flex-wrap:wrap-reverse; 颠倒行的顺序
flex-flow 是flex-direction 和flex-wrap的简写
flex-flow:clum wrap; --改变轴方向为cloumn 和换行
3.主轴对齐
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between; 两端对齐
justify-content: space-around; 环绕
4.交叉轴 -垂直方向
align-items:flex-start;
align-items:flex-end;
align-items:center;
align-items:baseline; 文字基线对齐
4.1单个子元素对齐方式
align-self: flex-start;
align-self: flex-end;
align-self: center;
5.多轴对齐
algin-content: stretch; --为默认
algin-content: flex-start; 在开始位置
algin-content: flex-end; 在结束位置
algin-content: center; 在中间
algin-content: space-between; 两端对齐
algin-content: space-around; 环绕
6.order 排序 默认值是0 值越小越靠前
order:0;
order:1;
7.放大比列 flex--grow
默认值是0 -不放大
不为0时 有剩余空间才放大
flex--grow ：1 ；--占了剩余空间 放大子元素
当多个子元素设置了 flex--grow ：1；就子元素平分剩余空间
8. 缩小比列 flex-shrink: --默认值1 --0 就是不缩小
flex-shrink：0；
当其中一个子元素设置了 flex-shrink：0；那么它就不缩小比列，其余子元素则缩小比例
9.flex-bassis 基准值
flex-bassis：50px; 和设置宽度差不多
