flex 布局

父元素：display:-webkit-flex 用后不能再用定位。如淘宝的底部导航，再在外面包裹一个DIV做定位：display:fixed;left:0;bottom:0;width:100%

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

                                  center                 居中

                                   space-bewteen  两端对齐

                                   space-around    子元素拉手分布

                                   flex-start             居左

                                   flex-end               居右

            align-items               元素的垂直居中

                                 center       居中

                                 flex-start   顶部

                                 flex-end    底部

            flex-direction           排列方式

                                 row                        横向排列

                                 row-reverse           横向翻过排列

                                 colunm                   纵向排列

                                 column-reverse      纵向翻过排列

            flex-wrap              子元素是否在一行显示

                                nowrap                 不换行（默认值）

                                 wrap                      换行

           align-content           多行的时候，垂直排列

                                center                 居中

                                

    子元素身上的属性： 

                               flex:1                1指的是一个系数                                    

                                flex:2  

                               子元素在划分父元素的宽度，先丢开固定的宽度

                               flex-grow:1           定义子元素剩下的放大比例

                               align-self:flex-start   

                              order:1                     规定子元素的顺序.排序

                                                              数值越小越靠前

                                                              默认值为0

 

 

              延申思想1：  box-sizing

                      box-sizing:border-box:是向里的

                       box-sizing:content-box:向外扩展

 

 

 

             延申思想2：  width:cale(25% - 2px)

                      border-sizing:border-box:是向里的

                      border-sizing:content-box:向外扩展