Flex弹性布局

父级：

display:flex

如果父级用了弹性布局，子元素就 不需要float了

父级上的其它属性：

justify-content:子元素水平排列方式

                center  居中

                space-between 两端对齐

                space-around  每个子元素拉手分布

 　　　　　　　　　 flex-start  左

                                  flex-end   右

 

 align-items:子元素垂直排列方式

             center:居中

　　　　　　　   flex-start  上

                            flex-end   下

align-content  多行子元素，垂直排列

                            center:居中

　　　　　　　   flex-start  上

                            flex-end   下

 flex-direction:排列方向

                     row：横向

                     row-reverse  横向翻过

                     column   纵向

                     column-reverse  纵向翻过

flex-wrap:  如何包裹子元素的

               wrap:子元素换行

               no-wrap:子元素不换行

flex-flow:flex-direction和flex-wrap的简写

 

子级：

　　　　flex:1   平分父级的宽度

　　　　flex:grow   让换行的子元素（假如两个），占满新的一行。放大

　　　　align-self:自己的单独的，用来覆盖父级的

　　　　order  子元素顺序  数值越小越靠前   

　　　　

例子