使用 flex 布局
flex 的使用方法很简单，只需要将其 display 属性设置为 flex 就可以，也可以设置行内的 flex，记得 Webkit 内核的浏览器，必须加上 -webkit 前缀。注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
父容器属性
父容器上有四个属性，其实还有其他属性，不过最重要的就是这个四个
flex-direction：主轴的方向。
flex-wrap：超出父容器子容器的排列样式。
justify-content：子容器在主轴的排列方向。
align-items：子容器在交叉轴的排列方向。