伸縮盒子的特點:
只有伸縮盒子纔有主軸和側軸
主軸：默認水平從左向右
默認按照主軸方向排列
側軸：始終垂直主軸
伸縮盒子的子元素默認不換行
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; //跨所有列