flex是什么？
任何容器都可以指定为flex布局：
.box{
display: flex; /* 行内元素可以使用：inline-flex，webket内核浏览器必须 -webkit-flex */
}
设为flex布局后，子元素的float，clear，vertical-align属性都会失效
概念
属性
|
属性名称 |
属性解释 |
属性值 |
|
|
容器的属性 |
flex-direction |
决定item排列方向 |
默认row, row-reverse, column, column-reverse |
|
flex-wrap |
排列不下时，item如何换行 |
默认nowrap, wrap, wrap-reverse |
|
|
flex-flow |
direction和wrap的简写 |
默认row nowrap |
|
|
justify-content |
item在主轴上的对齐方式 |
flex-start, flex-end, center, space-between, space-around |
|
|
align-items |
item在另一轴上的对齐方式 |
flex-start, flex-end ,center baseline, stretch |
|
|
align-content |
多根轴线的对齐方式 |
flex-start, flex-end, center, space-between, space-around, stretch |
|
|
项目的属性 |
order |
决定item的排列顺序 |
默认0，整数，越小越靠前 |
|
flex-grow |
当有多余空间时，item的放大比例 |
默认0，即有多余空间也不放大 |
|
|
flex-shrink |
当空间不足时，item的缩小比例 |
默认1，即空间不足时缩小 |
|
|
flex-basis |
项目在主轴上占据的空间 |
默认auto，长度值（例如100px） |
|
|
flex |
grow、shrink、basis的简写 |
默认 0 1 auto |
|
|
align-self |
单个item独特的对齐方式 |
同align-items，以align-self优先 |
参考：http://www.runoob.com/w3cnote/flex-grammar.html
;