这些天要写几个移动端的页面，想到了用flex布局，今天就稍微复习并总结一下知识点。
Flexbox得到了W3C的认可，可以在各个浏览器中广泛地运用。Flexbox是一维布局模型，要么设置水平方向要么设置垂直方向。
弹性盒子Flexbox的两根轴线：主轴和交叉轴，flex的空间分布和对齐能力依赖于这两根轴。
如果flex元素不设置高度的话，flex元素的高度会等于flex父级容器的高度。
注意：设置成弹性盒子，flex不在乎后面有没有换行，弹性盒子会等比列压缩超出盒子的部分，默认情况下是不会换行和超出的。
交叉轴中充满父级的属性align-items:stretch。
flex-direction设置flex容器主轴的方向
/*默认情况下*/
flex-direction: row;
/*方向相反*/
flex-direction: row-reverse;
/*垂直方向:从上往下*/
flex-direction: column;
/*垂直方向:从下往上*/
flex-direction: column-reverse;
flex-wrap控制flex容器换行
/*允许换行,一般情况下按顺序是正方向*/
flex-wrap:wrap;
/*反方向*/
flex-wrap: wrap-reverse;
justify-content主轴上的对齐方式
/*默认情况下,在主轴上的对齐方式是从main start*/
justify-content: flex-start;
/*主轴上的对齐方式是从main end*/
justify-content: flex-end;
/*主轴上的对齐方式是从居中对齐*/
justify-content: center;
/*主轴上的对齐方式是两端对齐*/
justify-content: space-between;
/*主轴上的对齐方式是每一个项目左右两边的空隙相等*/
justify-content: space-around;
align-items交叉轴单行对齐
/*交叉轴默认对齐*/
align-items:flex-start;
/*交叉轴向下对齐*/
align-items:flex-end;
/*交叉轴中间对齐*/
align-items: center;
/*不设置高度时flex元素充满flex容器*/
align-items: stretch;
/*与第一行文本对齐,给第二个文本设置margin-top的时候,第一个和第三个会跟着往下窜*/
align-items: baseline;
align-content交叉轴多行对齐
多线的对齐方式，单线不起作用
/*起点对齐*/
align-content:flex-start;
/*终点对齐*/
align-content: flex-end;
/*居中对齐*/
align-content: center;
/*两端对齐,第一行在cross-start位置，最后一行在cross-end位置*/
align-content: space-between;
/*分开对齐*/
align-content:space-around;
/*在flex元素也就是这边的item没有设置高度,可以设置stretch,会把自己撑开*/
align-content: stretch;
/*在什么都不设置的情况下，只设置高度，有个默认属性值是auto*/
align-items 和align-content的区别
align-content属性只适用于多行的flex容器，并且当交叉轴上有多余空间使flex容器内的flex线对齐。
注意：所以对于只有一行的flex元素，align-content是没有效果的。
如果主轴是水平的,flex-basis由宽度决定,如果主轴是垂直的,那么flex-basis,主轴方向的尺寸由高度决定。
align-self可以设置单个项目在交叉轴上的对齐方式
align-self: center;
flex-grow按比例拉伸
flex-shrink按比例压缩
order：number;该项目排列的位置，最小的那个排前面,从小到大排列
.item:last-child{
background: rgb(88,8,88);
flex-shrink:2;
order: -5;
}
flex-basis是定义元素在主轴方向上的尺寸，flex-basis默认会继承宽度，如果自己有设置的话就会用自己的。
