简介
display:flex;
display:inline-flex;
//webkit内核的浏览器 必须加上前缀
display:-webket-flex;
子元素float clear vertical-align属性失效
容器属性
flex-direction:row|row-reverse|column|column-reverse决定项目排列的方向
flex-wrap：nowrap|wrap|wrap-reverse 一排轴线排不下 如何换行
flex-flow:flex-direction 和flex-wrap的简写形式
justify-content：flex-start|flex-end|center|space-between|space-around定义项目在主轴上的对齐方式
align-items:flex-start|flex-end|center|baseline|stretch定义项目在交叉轴上如何对齐
align-content：flex-start|flex-end|center|space-between|space-around|stretch定义了很多根轴线的对齐方式
项目属性
order:定义项目的排列顺序 数值越小排列越靠前 默认为0
flex-grow:定义属性的方法比例 默认为0 即及时存在剩余空间，也不放大
flex-shrink:定义项目缩小比例 默认为1 即如果空间不足 该项目将缩小 为0不缩小
flex-basis:定义了在分配多余空间之前，项目占据的主轴空间；默认值为auto即项目的本来大小
flex:grow\shrink\basis的简写 如0 1 auto 两个属性快捷键 auto(1 1 auto) none(0 0 auto)
align-self:auto|flex|flex-end|center|baseline|stretch 允许单个项目有与其他项目不一样的对齐方式
可覆盖align-items属性