width: 100%;

           position: fixed;

使用flex布局 会影响继承父元素宽度的情况  所以需要设置成100% 让其重新撑满屏幕的宽度

                                display: flex;

设置成flex布局之后，子元素float就失效了 定位仍然可用

                              设置主轴方向

默认 不换行 主轴方向从左到右

flex-direction: row;               从右到左的顺序

flex-direction: row-reverse;           颠倒顺序

 主轴方向从上到下

flex-direction: column;         变换了主轴

flex-direction: column-reverse;          颠倒

                flex布局默认不换行

flex-wrap: nowrap;               默认情况下，项目都排在一条线（又称"轴线"）上

flex-wrap: wrap;                    换行

flex-wrap: wrap-reverse;           上下行颠倒

flex-flow:row wrap;                  复合属性 设置主轴方向和是否换行的