页面中任何一个元素设置了display:flex属性，那么当前盒子都称为弹性布局。弹性布局默认有两条轴。默认水平显示的是主轴，始终垂直主轴的侧轴（也叫交叉轴）。弹性盒子中的所有子元素都是沿着主轴方向显示。
弹性布局中有属性需要明白的是
items:代表全部flex子项目
content:代表整体
align: 代表垂直
justify 代表水平
self：表示单个元素，是flex子项的属性
这四个属性可以对其进行组合：比如，如果已水平方向为主轴，justify-content:表示整体的水平布局方式，align-items:表示所有全局的垂直布局方式。等等
弹性布局还可以通过order属性的大小对flex子项进行排序。通过flex-grow属性对盒子进行放大，使用flex-shark属性对象flex在宽度不足的时候进行缩小。使用flex-basic保证其基本大小
创建弹性盒子,弹性盒子可以设置宽高,默认父元素的高
首先输入:isplay:flex
主轴对齐方式:
默认值,起点排列:justify-content:flex-start;
终点排列:justify-content:flex-end;
子元素居中:justify-content:center;
左靠左,右靠右,中间自适应:justify-content:space-between;
盒子间隔平均分1比2:justify-content:space-around;
盒子间隔平均分1比1:justify-content:space-evenly;
单行侧轴对齐方式:
从上开始排列:align-items:flex-start;
从下开始排列:align-items:flex-end;
居中:align-items:center;
默认值,拉伸成父元素一致高度:align-items:stretch;
改变主轴方向:
从上往下:flex-direction:column;
从下往上:flex-direction:column-reverse;
默认值,从左往右:flex-direction:row;
从右往左:flex-direction:row-reverse;
伸缩比(优先级大于宽高):flex:1; 子盒子,平分父盒子宽度,占满剩余空间
多行侧轴排列方式:
从起点排列:align-content:flex-start;
从终点排列:align-content:flex-end;
重点*多行居中:align-content:center;
重点*两边靠边,中间自适应:align-content:space-between;
比例分1比2,平分父元素高度:align-content:space-around;
比例分1比1,平分父元素高度:align-content:space-evenly;
