flex的四大概念：
容器：如果在一个盒子上面，设置display:flex，那么这个盒子就是一个容器。
项目：容器的直接子元素，叫项目。容器中的项目都是块级元素。例如：span原来是inline，但由于它的父元素变成flex，所以，它自己变成了block。
主轴：在容器中，项目默认是按主轴方向排列，默认是从左向右排列。
交叉轴：与主轴垂直的那个轴。
容器的相关属性：
1.flex-direction：改变主轴方向 row（横向） column（纵向） row-reverse（反横向） column-reverse （反纵向）。
2.flex-wrap:项目足够多的时候，是否换行 wrap nowrap
3.flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4. justify-content:处理富余空间 flex-start flex-end center space-between space-around
5.align-items: 定义项目在交叉轴上如何对齐 flex-start flex-end center baseline
6.align-content : 当有多根主轴时，多根主轴的对齐方式。相当于处理垂直方向上的富余空间。stretch flex-strat flex-end space-between space-around。
项目相关的属性： （这一部分属性只能设置在项目上）
order：是用来改变项目的顺序的，数值越小，排列越靠前，默认为0.可以为负数。
flex-grow：让某个项目生长
flex-shrink：让某个项目压缩
flex-basis：项目在主轴上占据的大小 默认为auto(主轴是水平方向时就是宽度，主轴是垂直方向时：默认为height值。
flex：上面几个属性的简写方式 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：auto | flex-start | flex-end | center | baseline | stretch 单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式
小结：有三种情况，会把一个元素悄悄地改成block
- Float.把自己改成block
- Position:absolute/fixed 把自己改成block
- Display:flex。把子元素改成block
