flex容器六属性
flex-direction、flex-wrap、justify-content
align-items(baseline: 子元素的第一行文字的基线对齐、默认值stretch拉伸)、
align-content: 当 flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线。多根轴线相对与垂直轴的对齐方式
flex-flow: flex-direction 和 flex-wrap 的简写形式，没卵用
flex项目六属性
1. order 定义元素在容器中的排列顺序，数值越小，排列越靠前，默认值为 0，一般用不上。
- flex-grow定义元素的放大比例，默认为
0，即如果存在剩余空间，也不放大；值设置为3 2 1，即按照3：2：1来通过放大元素来分剩余空间。
3.flex-shrink属性定义了元素的缩小比例，默认为1，即如果空间不足，该元素将缩小，值为0不缩放。跟flex-grow有点区别，缩放还得关系到元素自身大小。
假设容器宽总100px，3个子元素分别为50 50 25px ;
缩25px 如果是默认的flex-shink=1 就按元素长度比 2：2：1 ----25*占比分别缩10px 10px 5px;
如果flex-shink 分别为 2 1 1，就按 2*2/4：2*1/4：1*1/4=4:2:1，分别缩 14.28 7.14 3.58 ;
4. flex-basis: 定义了在分配多余空间之前，元素占据的主轴空间，默认值：auto，即项目本来的大小,元素本来的width 或 height ,设置数值相当于代替他们;值为%，是相对父容器的大小。
5. flex: flex-grow, flex-shrink 和 flex-basis的简写，默认值 0 1 auto,auto表示项目本身大小
flex:1表示：1 1 任意数字，等分剩余空间
flex:auto 表示1 1 auto
6. align-self: 允许单个项目有与其他项目不一样的对齐方式
单个项目覆盖 align-items 定义的属性，默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
