Flex是Flexible Box的缩写，意为”弹性布局”， 用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局
我将弹性盒的实现细分为以下五个步骤
一、定义弹性布局
display:flex;
二、定义主轴方向
flex-direction:row; 定义主轴方向是水平方向，盒子从左往右排列
flex-direction:row-reverse; 水平方向从右往左排列
flex-direction:column; 垂直方向向从左往右排列
flex-direction:column-reverse; 垂直方向反从右往左排列
三、定义主轴对齐方式
justify-content:center; 居中（内容都集中到中间）
justify-content:space-between; 两端不留白对齐，中间间距平均分布
justify-content:space-around; 两端留白，中间间距平均分布，两端间距是中间间距的一半
justify-content:space-evenly; 两端留白，中间和两边的间距平均分配
justify-content:flex-start; 默认左对齐，主轴方向为y时，就是上对齐
justify-content:flex-end; 默认右对齐，主轴方向为y时，就是下对齐
四、定义交叉轴的对齐方式
align-items:center;
align-items:flex-start;
align-items:flex-end;
align-items:stretch; 默认值，会让交叉轴的空间铺满
五、定义子元素超出后是否换行
flex-wrap:wrap;
flex-wrap:nowrap;
使用弹性布局
①默认主轴方向是y轴
②会改变元素特点（行内标签可以支持宽高）且只对子元素生效
