伸缩盒子的特点:
只有伸缩盒子才有主轴和侧轴
主轴：默认水平从左向右
默认按照主轴方向排列
侧轴：始终垂直主轴
伸缩盒子的子元素默认不换行
1.首先呢，要给直接父容器（亲爹）设置为伸缩盒子，也就是display:flex;
2.调整主轴方向：
flex-direction:row; //行，从左向右
row-reverse; //行，从右向左
column; //列，从上向下
column-reverse; //列，从下向上
inherit;
3.调整元素在主轴方向的对齐方式：
justify-content:center; //居中对齐
flex-end; //右对齐
flex-start; //左对齐
space-around; //元素周边间隙环绕
space-between; //两端对齐
4.调整元素在侧轴对齐方式
align-items:center; //中间对齐
flex-end; //侧轴结束位置对齐
flex-start: //侧轴开始位置对齐
stretch; //默认值，拉伸
5.设置子元素是否换行
flex-wrap:nowrap; //默认不换行
wrap; //换行
6.设置元素换行后的对齐方式
flex-content:stretch; //默认
flex-start;
center;
flex-end;
space-around;
space-between
注意：该属性必须配合flex-wrap使用；
设置的是元素换行后再侧轴对齐方式。
7.伸缩盒子中的对齐方式（子元素）
align-self:center;
flex-start;
flex-end;
stretch;
order设置元素显示顺序:
值越大，显示顺序越靠后；
写法：order:1;
flex设置子元素在父元素中的缩放比例（只能给子元素设置）
例子：
flex:1;
假如有3份，每一份都设置成flex:1;会把盒子平均分成3份，每个占三分之一。
注意：<img>标签必须要包裹在一个标签里，才可以用，比如包在<a>里，给<a>设置flex才可以
8.多列布局
column-count:; //设置列数
column-count:2; //2列
column-gap:10px; //设置列与列之间的宽度
column-rule:1px solid red; //设置列与列之间的样式
column-span: ； //一般用于文章的标题
1; //默认值
all; //跨所有列
