flex布局

flex布局：即为弹性布局。使用display:flex进行布局，此布局使得盒模型布局更易使用。

注意：设为flex布局后，子元素的float、clear和vertical-align属性将失效。

display: flex;   justify-content：center;      align-items：center；    flex-direction：column

flex的使用

当元素使用flex布局后，该元素则成为flex容器(container)。                                                          flex容器属性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

当元素使用flex布局后，flex容器中的元素则成为flex项目(item)。                                                   其项目属性有：order、flex-grow、flex-shrink、flex-basis、flex、align-self(此6属性父元素必须为flex容器，否则失效)，下面仅对容器属性做说明。

 

flex-d