css的flex布局

      1) 概念

        主轴：默认主轴x轴，子元素沿着主轴来进行排列

        交叉轴：与主轴垂直的轴

      2) 规则

        写在父元素上的规则：

          display:flex;强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。

          flex-direction:row;定义主轴方向，row 表示主轴是x轴，column表示主轴为y轴

          flex-wrap:nowrap当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，

          align-items: stretch;定义父元素中的子元素在交叉轴上的排列方式

          justify-content:space-around;定义伸缩盒容器中的子元素在主轴上的排列方式

        写在子元素上的规则

          flex-basic:主轴上的基础长度（基本工资）

          flex-grow:主轴上剩余空间分配的份数（分红）

          flex-shrink:主轴上亏损空间的分摊份数（亏损）