内容：
设置弹性容器：display:flex/inline-flex;，它的所有子元素自动成为弹性子元素
- 弹性容器外 弹性子元素内正常渲染。（弹性盒子只定义了弹性子元素如何在弹性容器内布局）
- 通常情况下默认每个容器只有一行，弹性子元素在弹性盒内一行显示。
- 设置flex布局以后，子元素的float 、 clear 、 vertical-align属性将失效。
容器存在两个轴：水平的主轴 和 垂直的交叉轴。
弹性容器属性：
改变弹性子元素的排列方式，在弹性容器中设置：direction:rtl;
【1】flex-direction: 改变弹性子元素在父容器中的位置
flex-direction: row | row-reverse | column | column-reverse
横向ltr 反转横向 纵向 反转纵向
//下图按此方式显示：
【2】flex-wrap: 改变弹性子元素的换行方式
flex-wrap: nowrap |wrap| wrap-reverse- nowrap 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
- wrap 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
- wrap-reverse 反转 wrap 排列。
【3】flex-flow:（flex-direction属性和flex-wrap属性的简写形式。）
flex-flow: row wrap; //横向排列 多行排列【4】justify-content: 弹性子元素内容对齐
justify-content: flex-start | flex-end | center | space-between | space-around
左对齐 右对齐 居中 两端对齐 两侧间隔相等为项目间隔的一半
【5】align-items 弹性子元素在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
// 分别沿交叉轴的 起点对齐 终点对齐 中点对齐 子元素的第一行文字基线
//stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
【6】align-content： 定义多根轴线的对齐方式
这个属性只有在容器有多条主轴是才有效，一条主轴无效
类似于justify-content属性
justify-content: flex-start | flex-end | center |space-between| space-around | stretch
与交叉轴起点对齐|交叉轴终点对齐|交叉轴中间对齐|交叉轴两端对齐|交叉轴两侧间距相等|默认值弹性子元素属性：
【1】order：弹性子元素的排列顺序。数值越小，排列越靠前（可以为负）。
【2】flex-grow：定义弹性子元素的放大比例，默认为0，(就是如果没有占满容器整行，不放大项目。)
【3】flex-shrink：定义弹性子元素的缩小比例，默认为1，(如果空间不足，该弹性子元素将缩小。)
【4】flex-basis: 在分配多余的空间之前，弹性子元素占据的主轴空间，默认为auto，就是弹性子元素本来的宽度 (eg：直接可以写成 flex-basis:200px;)
【5】flex: 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-self: auto | flex-start | flex-end | center | baseline | stretch;
margin:auto;使得弹性子元素在两轴方向上完全居中