网页布局的传统解决方案，基于盒状模型，依赖display，position，float属性。
但是对于特殊布局很不方便，比如垂直居中。
1.基本概念
flex布局意为弹性布局，任何一个容器都可以指定为flex布局，行内元素也可以使用。
.box{display:flex;display: -webkit-flex;}
.box{display:inline-flex;}
设为flex布局后，子元素的float，clear，vertical-align属性会失效。
2. 元素的属性
采用flex布局的元素有6个属性：
1.flex-direction： 决定子元素的排列方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- row（默认值）：水平方向，起点在左端。
- row-reverse：水平方向，起点在右端。
- column：垂直方向，起点在上端。
- column-reverse：垂直方向，起点在下端。
2.flex-wrap： 默认情况下，子元素都排列在水平方向，flex-wrap定义一排放不下时如何换行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap：默认不换行
- wrap：换行，第一行在上面
- wrap-reverse：换行，第一行在下面
3. flex-flow： flex-direction和flex-wrap的简写形式，默认为row nowrap
4. justify-content： 定义子元素在水平方向上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- flex-start：默认值，左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，元素之间的间隔都相等。
- space-around：每个元素两侧的间隔相等，所以，元素之间的间隔比元素与边框的间隔大一倍
5.align-items： 定义子元素在垂直方向上的对齐方式
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- flex-start：顶部对齐。
- flex-end：底部对齐。
- center：居中对齐。
- baseline: 元素的第一行文字的基线对齐。
- stretch：默认值，如果元素未设置高度或设为auto，将占满整个容器的高度。
6. align-content： 定义多行的对齐方式，如果只有一行，该属性不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
- flex-start：顶部对齐。
- flex-end：底部对齐。
- center：居中对齐。
- space-between：两端对齐，行之间的间隔平均分布。
- space-around：每行的间隔都相等，所以，行之间的间隔比行与边框的间隔大一倍。
- stretch：默认值，占满整个空间。
3. 子元素的属性
1. order： 定义排列顺序，数值越小越靠前，默认为0
.item {
order: 0;
}
2. flex-grow： 定义放大比例，默认为0。如果所有元素的flex-grow都是1，它们将等分剩余空间
3.flex-shrink： 定义缩小比例，默认为1，如果所有元素的flex-shrink都是1，它们都将等比例缩小
4. flex-basis： 定义在分配多余空间之前，计算是否有剩余空间，默认值为0，即父级的本来大小
5.flex： flex-grow，flex-shrink， flex-basis的简写，默认值为0 1 auto。
两个快捷值auto（1 1 auto）和none（0 0 auto），建议优先使用这个属性。
6.align-self： 允许单个元素与其他元素不一样的对齐方式，可覆盖align-items，默认值为auto，表示继承父级的align-items
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
