转载：https://www.runoob.com/w3cnote/flex-grammar.html 自留学习
转载：https://www.cnblogs.com/lynnmn/p/6262941.html flex布局的应用
flex布局
flex-direction(主轴的方向) row | row-reverse | column |column-reverse
flex-wrap (项目都排一条线“轴线”) nowrap |wrap |wrap-reverse
flex-flow :是flex-direction属性和 flex-wrap属性的简写，默认为row nowrap
justify-content:定义了项目在主轴上的对齐方式 flex-start|flex-end|center|space-between |space-around
align-items: 定义了项目在交叉轴上如何对齐 flex-start | flex-end | center | baseline |stretch
align-contents：定义了许多轴线的对齐方式 flex-start|flex-end | center| space-between |space-around| stretch
项目属性：
order: 项目排列顺序，越小越靠前
flex-grow: 空间剩余时放大比例 默认为0，存在剩余空间也不放大， 如果项目属性为1则平分，如果有一个为2，其他为1，则前者占有空间多一倍。
flex-shrink: 空间不足时缩小比例 默认为1，空间不足都将等比例缩小，如果有一个为0，其他为为1，则空间不足时，前者不缩小。
flex-basis: 缩放前的原始尺寸
flex: flex-grow flex-shrink flex-basis 默认 0 1 auto
auto (1 1 auto) 和 none (0 0 auto)。
flex:1; 1 1 0%; flex:2;2 1 0%;
align-self: 单独为某元素设置对齐方式，继承父元素align-items属性 没父元素等同于stretch