什么是flex布局
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{ display: flex; }
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex; }
Webkit 内核的浏览器，必须加上-webkit前缀。
.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
基本概念
穹器默认存在两根轴:水平的主轴( main axis )和垂直的交又轴( cross axis )。主轴的开始位置(与边框的交又点）叫做main start，结东位置叫做main end;交叉轴的开始位置叫做cross start，结东位置叫做cross end
容器属性
flex-direction |
属性决定主轴的方向（即项目的排列方向） |
flex-wrap |
默认情况下，项目都排在一条线（又称"轴线"） |
flex-flow |
属性用于设置或检索弹性盒模型对象的子元素排列方式 |
justify-content |
属性定义了项目在主轴上的对齐方式 |
align-items |
属性定义项目在交叉轴上如何对齐。 |
align-content |
属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 |
flex-direction属性
row（默认值） |
主轴为水平方向，起点在左端 |
|
主轴为水平方向，起点在右端。 |
|
主轴为垂直方向，起点在上沿。 |
|
主轴为垂直方向，起点在下沿。 |
flex-wrap属性
| nowrap | （默认）不换行 |
| wrap | 换行，第一行在上方 |
| wrap-reverse | 换行，第一行在下方 |
flex-flow属性
| flex-direction | 规定灵活项目的方向 |
| flex-wrap | 规定灵活项目是否拆行或拆列 |
| row nowrap | 默认值 |
justify-content属性
| flex-start | 默认值。项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| center | 项目位于容器的中心。 |
| space-between | 项目位于各行之间留有空白的容器内。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
align-items属性
| stretch | 默认值。项目被拉伸以适应容器。 |
| center | 默认值。项目被拉伸以适应容器。 |
| flex-start | 项目位于容器的开头。 |
| flex-start | 项目位于容器的结尾。 |
| baseline | 项目位于容器的基线上。 |
align-content属性
| stretch | 默认值。项目被拉伸以适应容器。 |
| center | 项目位于容器的中心。 |
| flex-start | 项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| space-between | 项目位于各行之间留有空白的容器内。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
项目的属性
order |
定义项目的排列顺序。数值越小，排列越靠前，默认为0。 |
flex-grow |
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 |
flex-shrink |
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 |
flex-basis |
定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 |
flex |
用于设置或检索弹性盒模型对象的子元素如何分配空间 |
align-self |
定义flex子项单独在侧轴（纵轴）方向上的对齐方式 |
