http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
任何一个元素都可以设定为 flex 布局容器
block, inline, inline-block ... 都可以设为容器
父级容器称为 flex container. 子元素称为 flex item
子元素的 float，clear，vertical-align 将失效
div {
display: flex;
}
span {
display: inline-flex;
}
父级容器的属性
子元素排序方向（row 默认 / row-reverse / column / column-reverse）
.container {
flex-direction: row;
}
子元素换行（ nowrap 默认 / wrap / wrap-reverse ）
.container {
flex-wrap: nowrap;
}
子元素排序方向，子元素换行简写（默认 row nowrap ）
.container {
flex-flow: row nowrap;
}
单行子元素水平方向对齐（ flex-start 默认 / flex-end / center / space-between / space-around ）
.container {
justify-content: flex-start;
}
单行子元素垂直方向对齐（ flex-start 默认 / flex-end / center / baseline / stretch）
.container {
align-items: flex-start;
}
多行子元素垂直方向对齐（ flex-start 默认 / flex-end / center / space-between / space-around / stretch ）
.container {
align-content: space-between;
}
子级项目的属性
子元素排序方向
数字顺序决定排序
.item {
order: 3;
}
子元素弹性放大
数字大小决定放大倍数
.item {
flex-grow: 3;
}
子元素弹性收缩
数字大小决定缩小倍数
所有项目的 flex-shrink 默认都为 1，当空间不足时，都将等比例缩小
设定其中一个项目的 flex-shrink 为 0，其他项目都为 1，则空间不足时，前者不缩小
.item {
flex-shrink: 3;
}
主轴富余空间
在分配多余空间之前使用
默认 auto，可以设置像素值，让子元素集合占据固定空间
.item {
flex-basis: auto;
}
子元素复合写法（弹性放大 / 弹性缩小 / 主轴富余空间）
该属性有两个快捷值：auto ( 1 1 auto ) 和 none ( 0 0 auto )
flex 是弹性放大，弹性缩小，主轴富余空间的简写，默认值为0 1 auto，后两个可选
.item {
flex: auto;
}
