弹性盒子元素详解与特性

            display: flex;
            flex-direction: row;/*默认属性 row 如果改成垂直显示 子元素高度会等比例压缩*/
            flex-wrap: nowrap;/*水平方向换行方式 默认nowrap如果显示不开等比例压缩*/
            justify-content: space-around;
            /*子元素水平对齐方式
            flex-start 左对齐
            flex-end  右对齐
            center  居中对齐
            space-between 两端对齐
            space-around 等间距对齐；
            */
            align-items: center;
            /*
            子元素的垂直对齐方式
            flex-start：交叉轴的起点对齐。
             flex-end：交叉轴的终点对齐。
            center：交叉轴的中点对齐。
            baseline: 项目的第一行文字的基线对齐。
            stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
             order
            /*用来决定子元素的排列顺序越小越靠前*/
            /*flex-grow: 1;*/
            /*剩余空间的分配比例：默认为0 不分配
            值越大 分配比例越多*/
            flex-shrink: 0;
            /*空间不足时的压缩设置 默认为1 等比例压缩
            如果一个元素不想等比例压缩 只需要给这个元素设置为零
            */
            flex-basis: 500px;
            /*定义元素的固定基础宽度 如果还有剩余空间 则所有元素均分剩余空间*/
        }
   <!--
1：如果一个普通元素想成为弹性盒子元素只需要给元素添加display：flex;
2：弹性盒子基本上是添加给父元素，为的是让其中的子元素可以按照flex的规则进行布局
   如果子元素中还有孙子元素按照弹性盒子的规则进行布局，那么子元素也要添加display：flex；
3:如果父元素添加了display：flex属性那么子元素中float clean position等属性无效