flex布局表示弹性布局，可以为盒状模型提供最大的灵活性
适用范围：任何元素都可以指定为flex布局
.warp { display: flex; }
行内元素也可以使用flex布局
.box { display: inline-flex; }
父元素-常用属性
1. flex-direction 主轴方向
2. flex-wrap 换行方式
3. justify-content 对齐方式
4. align-items 交叉轴上是如何对齐
5. align-content 暂未使用过
.wrap{ flex-direction: row | row-reverse | column | column=reverse; }
- row: 默认值，表示沿水平方向，由左到右
- row-reverse ：表示沿水平方向，由右到左
- column：表示垂直方向，由上到下
- column-reverse:表示垂直方向，由下到上
.wrap{ flex-wrap: nowrap | wrap | wrap-reverse; }
- nowrap：表示不换行（宽度失效，强行在一行显示）
- wrap：正常换行，第一个位于第一行的第一个
- wrap-reverse：向上换行，第一行位于下方
.wrap{ justify-content: flex-start | flex-end | center |space-between | space-around }
- flex-start：默认值，左对齐
- flex-end：右对齐
- center：居中对齐
- space-between：两端对齐
- space-around：每个项目两侧的间距相等
.wrap{ align-items:flex-start | flex-end | center | baseline | stretch }
- flex-start:交叉轴的起点对齐
- flex-end: 交叉轴的终点对齐
- center: 交叉轴居中对齐
- baseline: 项目的第一行文字的基线对齐
- stretch：默认值,如果项目未设置高度或者高度为auto，将占满整个容器的高度
.wrap { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
子元素-常用属性
1. order：设置项目排序的位置，默认值为0，数值越小越靠前；
2. flex：剩余空间分配，该元素默认占据所有剩余空间。
3. align-self：当前项目可以和其他项目拥有不一样的对齐方式；
.item{ order:1; }
.item{ flex:1; }
.item{ align-self: flex-start | flex-end | center | baseline | stretch ; }
-
auto：默认值,和父元素align-self的值一致
-
flex-start：顶端对齐
-
flex-end：底部对齐
-
center：竖直方向上居中对齐
-
baseline：item第一行文字的底部对齐
-
stretch：当item未设置高度时，item将和容器等高对齐
