flex布局

而flex布局则是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。

如我们让多个div横向排列，传统做法是使用浮动，但浮空后因为脱离文档流的缘故，父元素会失去高度，这涉及了清除浮动等一系列的问题。

而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float；

flex-direction属性

取值：row(默认) | row-reverse | column | column-reverse

flex-wrap属性

取值：nowrap(默认) | wrap | wrap-reverse

flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

justify-content属性

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

align-items属性

取值：flex-start | flex-end | center | baseline | stretch(默认)

align-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);