我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战
1. flex属性是三个不同大小属性的简写：flex-grow flex-shrink flex-basis
flex：1 => flex-basis: 0% flex-grow:1 flex-shrink:1
flex：20% => flex-basis: 20% flex-grow:1 flex-shrink:1
flex-basis定义了元素大小的基准值,其余两个属性都基于flex-basis属性可以设置任意的width值，单位包括em、px百分比flex-grow每个弹性子元素的flex-basis计算出来后，他们加起来会占据一定宽度，加起来的宽度不一定正好填满弹性容器的宽度，可能会有留白。多出来的留白会按照flex-grow（增长因子）分配给弹性子元素，如果设置的值为非0，那么这些元素会将剩余空间分配完。flex-shrink(收缩因子)，如果设置的值为非0，则不会收缩，大于0的话元素收缩至不再溢出。如果启用了flex-wrap会忽略此属性。
2. 弹性的方向
flex-direction:row | column | row-reverse | column-reverse
3. 弹性容器的属性
flex-flow是flex-direction flex-wrap的缩写
justify-content控制子元素在主轴（横轴）上的位置
justify-content: flex-start | flex-end | center | space-between | space-around
align-items控制子元素在副轴（纵轴）上的位置
align-items: flex-start | flex-end | center | strench | baseline
align-content如果开启了flex-wrap，这个属性就会控制子元素在副轴（纵轴）上的间距，反之，align-content无效。
align-content: flex-start | flex-end | center | strech | space-between | space-around
align-self控制子元素副轴上的的对齐方式，会覆盖align-items的值
align-self: auto | center| flex-start| strench |flex-end |baseline
order将子元素从兄弟节点移动到指定位置，覆盖源码顺序。
order: 整数
