flex布局意为弹性布局，任意一个容器都可定义为弹性布局
eg: .box{ display:flex }
行内元素也可定义弹性布局
eg: .contaniner{ dispaly:inline-box } 在内核为webkit浏览器必须加上-webkit作为前缀 ***注意：定义flex布局的盒子，子元素中float,clear,vertical-align失效
父容器属性有6个
1.flex-direction:row(水平方向)/row-reverse（水平逆反）/cloumn/cloumn-reverse 2.flex-wrap:wrap,nowrap,wrap-reverse(是否换行) 3.flex-flow:(flex-direction和flex-wrap的结合) 4.justify-content: 5.align-items: 6.align-content:
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
项目属性有以下
1.order:默认为0，数字越小越靠前
2.flex:1
3.flex-grow:属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
4.flex-shrink:属性定义项目的缩小比例，默认为1，如果超出容器大小，自动压缩
5.flex-basis:默认为auto，即你设置的容器大小
6.align-self:flex-start,flex-end,center,auto,strench\
