flex布局是css3关于layout的重点内容，有的flex垂直居中可以轻松实现，布局更加得心应手
使劲戳例子一目了然：flexdemo
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
定义一个flexbox
预览：flexdemo
.flex{display:flex;}
flex布局的各种属性
预览：flexdemo
flex-direction： [row(默认) | row-reverse | column | column-reverse]
flex-wrap：[nowrap(默认) | wrap | wrap-reverse]
flex-flow 是flex-direction 和 flex-wrap的简写形式，例如：flex-flow:column nowrap
justify-content 主轴方向对齐方式
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items: flex-start | flex-end | center | baseline | stretch;
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
预览：flexdemo