弹性布局

参考视频链接：
https://www.bilibili.com/video/av18495093/?spm_id_from=333.788.videocard.0
https://www.bilibili.com/video/av18917955/?spm_id_from=333.788.videocard.0

参考文章链接：
https://mp.weixin.qq.com/s/0xhIRTqnu_kE3YXKyQH9Tw
https://mp.weixin.qq.com/s/GRIX4SrVNH63CX_bMCbc7g

父级身上的其他属性：

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

                             center  居中

                             space-between  两端对齐

                              space-around  子元素拉手分布

                              flex-start   居左

                              flex-end   居右

   align-items:          子元素垂直排列

                               center  居中

                                flex-end  底部

                                flex-start  顶部

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

                                 center

                                 flex-start

                                 flex-end

flex-direction：         横向排列

                                 row  横向排列

                                 row-reverse

                                 column  纵向排列

                                 column-reverse

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

                                 nowrap   不换行（默认值）                          

                                 wrap  换行

flex-flow:<flex-direction><flex-wrap>

举例子：/*flex-direction:column;flex-wrap:wrap;*/相当于flex-flow:column wrap;

子级身上属性：

     flex:1     1指的是一个系数

     子元素在划分父元素宽度，先剔除固定宽度

     align-self   其实就是用来覆盖父级align-items垂直排列

     flex-grow:1  规定子元素放大比例

     order：规定子元素顺序，排序数值越小，越靠前，默认值为0