flex 布局

flex是css3新增的一种布局方式,我们可以同时设置一个元素的display属性值设置为flex，从而使它成为一个flex容器，它的所有子元素都成为它的项目。

一个容器默认有两条轴，一个水平轴，一条是与主轴垂直的交叉轴

flex-direction来指定主轴的方向。

justify-content来指定标签在主轴的排列方式，

使用align-items来指定元素在交叉轴的排序方式。

还可以使用flex-wrap来规定当一行排列不下时的换行方式。

对于一个容器的项目，

使用order属性来指定项目的排列顺序，

flex-grow来指定当前排序空间有剩余的时候，项目放大比例。

flex-shrink来指定当前排序空间不足时， 项目缩小比例。