flex布局 弹性盒子

1. display: flex/inline-flex;     子元素的float、clear和vertical-align属性将失效。
    flex-direction :  主轴的方向即项目排列方向    默认row
    flex-wrap: 轴线排不下，如何换行
    flex-flow：默认值为row nowrap
     justify-content：主轴上的对齐方式
     align-items：在交叉轴上如何对齐
    align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

2. order：项目的排列顺序
    flex-grow：项目的放大比例，默认为0；即如果存在剩余空间，也不放大。
    flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    flex-basis：分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小   360px固定宽度
    flex：默认值为0 1 auto。后两个属性可选； 快捷值：auto (1 1 auto) 和 none (0 0 auto)。
    align-self：单个项目有与其他项目不一样的对齐方式（交叉轴） 覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch