align-items实现。css：
.flex-container{
max-width: 960px;
margin: 0 auto;
display:flex;
justify-content: center;
height: 200px;
background-color: white;
align-items: center;
}效果：
使用flex解决了以往css垂直居中实现复杂的问题！相应的，
align-items还有
flex-start,
flex-end等其他值。3. Flex Direction
flex-direction决定了主轴方向即flex item排列方向，除了默认的
row方向之外，还可以纵向、反向（row-reverse/column-reverse）排列flex item：css：
.flex-container{
... flex-direction: column;
align-items: center;
}
效果：
4. Flex Wrap
如果我们不想在窗口变窄的情况下压缩flex item，而是让超出边界的flex item换行显示那我们可以设置flex container的
flex-wrap：
.flex-container{
max-width: 960px;
margin: 0 auto;
display:flex;
flex-wrap: wrap;
}.box{
height: 100px;
min-width: 300px;
flex-grow: 1;
}
当我们压缩窗口的时候，效果如下：
flex wrap还有一个值：
wrap-reverse，设置该值后，被wrap的元素会排到其他元素上面：
由此可见，flex wrap一定程度上可以取代media query了。
5. Flex Row
最后，
flex-direction和
flex-wrap可以合并为一个属性
flex-flow，比如：
flex-flow: row-reverse wrap。Flex Item
1. Flex Grow
在上面所有的例子中，三个flex item只占据了flex container小部分空间，如果想让flex item占满flex container我们需要给flex item设置
