1）、Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，可以取代浮动布局。
2）、四大概念
- 容器：如果在一个盒子上面，设置display:flex，那么这个盒子就是一个容器。
- 项目：容器的直接子元素，叫项目。
- 主轴：在容器中，项目默认是按主轴方向排列，默认是从左向右排列。
- 交叉轴：与主轴垂直的那个轴。
3）、容器相关属性
flex-direction：改变主轴方向 row column row-reverse column-reverse
flex-wrap:项目足够多的时候，是否换行 wrap nowrap
* flex-flow:flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content:处理富余空间 flex-start flex-end center space-between space-around
align-items: 定义项目在交叉轴上如何对齐 flex-start flex-end center
align-content : 当有多根主轴时，多根主轴的对齐方式。相当于处理垂直方向上的富余空间。
4）、项目相关属性
order：是用来改变项目的顺序的
flex-grow：让某个项目生长
flex-shrink：让某个项目压缩
flex-basis：项目在主轴上占据的大小
flex：上面几个属性的简写方式
align-self：单独设置某个项目的对齐方式,单独一个项目在交叉轴的对齐方式
注*
flex下标签成为容器，脱胎于盒子，但不属于盒子。
简单用法：方便实现色子模型
