声明弹性盒模型的几种方式：1.display:flex;块级弹性盒子2.display:inline-flex行级弹性盒子
弹性盒子里的元素是弹性元素，默认水平方向排列flex-direction:row;
改变排列方向：flex-direction:column
，控制元素溢出盒子宽度时，自动换行.my{
display: flex;
width:100px;
height: 80px;
border: 1px solid red;
flex-direction: row;
flex-wrap:wrap;
}
.my *{
padding: 10px;
width: 30px;
height: 20px;
box-sizing: border-box;
border: 1px solid red;
}
主轴与交叉轴
若flex-direction:row;主轴则是水平的，从左到右，交叉轴则是与水平轴垂直的那条轴；若flex-direction:column;，主轴则是垂直的，从上到下，交叉轴则是与垂直的轴垂直，是水平的；
主轴中元素的排列：justify-content:center;居中排列flex-start;flex-end;主轴结束，从右到左
justify-content: space-evenly;完全平均分配，这里指
justify-content: space-around;
justify-content: space-between;
align-items: flex-end;交叉轴结束
align-items: center;交叉轴居中
align-items: stretch;拉伸适应交叉轴高度
交叉轴和主轴结合使用
align-items: center;
justify-content: center;
单个元素设置排列方式
.my div:nth-child(1){
align-self:center;
}
元素可用空间分配（当空间多的时候）：将剩余空间平均分配到每个元素身上:flex:1;
.my div:nth-child(1){
flex-grow:2;
}
.my div:nth-child(2){
flex-grow: 1;
}
.my div:nth-child(3){
flex-grow: 0;
}
元素动态缩小（当空间不够用的时候）：父元素400px，子元素3个每个300px，这时父元素不够分配，此时自动等比例缩小
若想这些元素，不等比例缩小，使用flex-shrink: 0;（缩小比例）
.my div:nth-child(2){
flex-shrink: 3;（缩小三倍）
}
flex-basis是元素在主轴上占的空间，flex-basis: 10px;相当于width:10px
flex是flex-grow、flex-shrink 、flex-basis缩写组合。
平均分配剩余空间，并不进行尺寸缩小，基础尺寸为200px。
flex:0 0 100px;(不分配剩余空间，不进行尺寸的等比例缩小，基础尺寸100px)
flex:0 1 100px;（进行缩放）
控制弹性元素的排序
order:数字越大越靠后，越小越靠前
.my div:nth-child(1){
order:2;
}
.my div:nth-child(4){
order:-11;
}
margin-right:auto的妙用
以导航栏为例，当导航栏设置了width；logo和ul分布在左边，按钮分布在右边，这是之间的空隙自动留出，使用margin-right:auto即可，就能实现logo和ul在左边分布，按钮在靠右边的位置分布。
