1、作用：
利用Flex可实现完美居中效果；
例（1）——display:flex;
（注意：无论父元素以何种比例递增，元素依旧保持水平居中）
.container{
width:200px;
height:200px;
background: cadetblue;
border: 1px solid #ccc;
display: flex;
}
.item{
width:50px;
height: 50px;
background: #eee;
margin:auto;
}
<div class="container">
<div class="item">
item
</div>
</div> 2、Flex布局对子元素的影响
（1）修改了display:block
会对直接的子元素的display改成block；
对嵌套的子元素(孙子辈)，不产生影响。
（2）解决了margin重叠的问题
（3）干掉了float
.container{
display:flex;
}
.item{
...
}
<div class="container">
<div class="item" style="float:left">1</div>
<div class="item" style="float:right">2</div>
</div>上述代码中，style="float:left/right"由于display:flex;的作用而没有定义的必要。
3、Flex几个概念
（1）容器&项目
a、容器：若给元素设置了display:flex,即称这是一个容器；
b、项目：容器里边的直接子元素，成为项目。
（2）主轴&交叉轴
a、主轴：在容器当中，项目按一定的方向排列，默认是从左向右；
排列方向即为主轴的方向，在容器内部，主轴方向与容器交集的地方，就是主轴。
b、交叉轴：与主轴垂直的轴。默认的方向是从上向下。
4、容器[container]的属性值
取值：row行排列(float:left——“1-2-3”)、
column列排列
row-reverse（类似于float:right——“3-2-1”）
column-reverse
默认情况下，由左向右，由上向下
功能：决定了主轴的方向。
（2）flex-wrap
取值：nowrap、wrap、wrap-reverse
（wrap-reverse表示换行方向颠倒，即从下向上的换行）
默认情况下，该属性表示换行，即在主轴方向上换行。
a、若默认水平方向(flex-direction:row)从左向右，换行方向：从上往下。
现象：1 2、3 4、5 6（三行两列）
b、若垂直方向（flex-direction：column）从上向下，
现象：1 2/3 4/5 6（三列两行）
功能：控制容器中项目的换行
（3）flex-flow
功能：简化代码。其实它是flex-direction与flex-wrap的合写。
flex-flow:flex-direction flex-wrap;
（4）jusity-content
取值：flex-start、flex-end、center、space-around、space-between
（默认值为flex-start）
space-around值表示容器很大，项目不足以填充整个容器，所以会有一部分空白部分，
此外，around表示环绕，让项目之间有联系。
space-between值表示容器与容器之间的距离相等。
功能：容器内的项目再按主轴方向排列，这个水性决定了项目和项目之间的位置关系，
在主轴方向上有富余的空间（项目的宽度小于容器的宽度），采用space-around/between
注意：主轴方向。
（5）align-items
取值：stretch、flex-start、flex-end、center、baseline
作用：项目在交叉轴（与主轴垂直的轴）方向上摆放的位置。
（6）align-content
取值：stretch、flex-start、flex-end、space-between、space-around
功能：a、当容器中有多行项目（当然，前提是允许换行）时，每一行项目就会产生一根主轴，多行项目就会产生多 个主轴。
b、这个属性决定这多跟主轴之间的位置关系。
