当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。
而flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。
例如我们让多个div横向排列，传统做法是使用浮动，但浮空后因为脱离文档流的缘故，父元素会失去高度，这又涉及了清除浮动等一系列的问题。
而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float；随着浏览器不断兼容以及旧版本的淘汰，flex布局注定会成为更为流行的布局方案。
1、flex-direction 属性，决定主轴的方向(即项目的排列方向)取值：row(默认) | row-reverse | column | column-reverse
2、flex-wrap属性，决定容器内项目是否可换行。取值：nowrap(默认) | wrap | wrap-reverse
3、justify-content属性，定义了项目在主轴的对齐方式。取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
4、align-items属性，定义了项目在交叉轴上的对齐方式。取值：flex-start | flex-end | center | baseline | stretch(默认)
5、flex-flow: flex-direction 和 f’lex-wrap 的简写形式。取值：flex-flow： || ；默认值为row nowrap，没什么卵用。
6、align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用。取值： align-content: flex-start | flex-end | center | space-between | space-around | stretch；
有六种属性可运用在 item 项目上：orderflex-basis: auto;定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间flex-grow: 0; flex-grow定义项目的放大比例flex-shrink: 1; 定义了项目的缩小比例flexalign-self