伸缩布局flex

伸缩布局（display:flex）

         伸缩布局基本定义：主轴方向，侧轴方向，默认主轴方向为x轴向右，y轴向下为侧轴

         1.flex-direction:定义主轴方向

                    row水平方向  reverse-row翻转 column垂直方向 reverse-column反向

          2.justify-content主轴方向的对齐方式

                    flex-start起始方向对齐   flex-end结束方向对齐 center中间对齐 space-around环绕 space-between两端对齐

           3.align-items:侧轴对齐方式

                     flex-start起始方向对齐   flex-end结束方向对齐 center中间对齐  strethc:拉伸

           4.控制子项的比例：注意不指定flex不参与分配