flex属性所有写法及含义
/*默认初始值，等价于flex:0 1 auto;*/
flex: initial;
/*等价于flex:0 0 auto;*/
/*既不放大，也不缩小*/
flex: none;
/*等价于flex:1 1 auto;*/
/*空间充足就放大，不足就缩小*/
flex: auto;
/*等价于flex:1 1 0%;*/
/*空间富余会放大，空间不足会缩小*/
flex: 1;
/*等价于flex:1 1 100px;*/
flex: 100px;
/*等价于flex:1 1 100px;*/
flex: 1 100px;
/*等价于flex:1 0 0%;*/
flex: 1 0;
flex: 1 0 100px;
flex:0和flex:none的区别
flex:0相当于flex:0 1 0%; flex:none相当于flex:0 0 auto;
flex:1和flex:auto的区别
flex:1相当于flex:1 1 0%; flex:auto相当于flex:1 1 auto; flex:1;在剩余空间不足时会优先牺牲自己的空间，不会优先压缩其他元素空间。flex:auto;则会优先扩展自己空间
flex:1应用场景
- 当希望元素充分使用剩余空间，但同时又不侵占其他元素空间时可以使用。
- 等宽布局
flex:auto应用场景
- 内容按照宽度等比例展开，比如横向的菜单栏，但是如果内容宽度不足时，会按照等宽展示
flex-basis含义
flex-basis用于设置子项占据主轴的空间，比如默认主轴就是代表元素占用的宽度。 优先级则是：
max-width||min-width > flex-basis > width > content-width
flex-basis设置了0%、auto、100px具体像素有什么区别？
最小内容宽度（中文是一个汉字的宽度，英文单词不能断）
- 0%：按照最小内容宽度展示（中文一个字，英文独立单词）
- auto：按最大内容宽度展示，如果元素失去弹性则默认不会换行
- 100px：如果失去弹性且没有设置过max-width min-width，则按照100px展示。其他情况参考优先级
flex-grow多余空间的分配规则
当存在多余空间时，多余空间按照子项设置的flex-grow比例进行分配
比如A、B、C默认占用宽度为200px，富余100px空间，因为A的flex-grow为0，所以不分配空间；B的flex-grow为2，因为C的flex-grow为1，所以B分配的空间为2/(1+2) x 100 = 66.66px，C分配的富余空间为1/(1+2) x 100 = 33.33px。最终尺寸A=50+0=50px；B=100+66.66=166.66px；C=50+33.33px=83.33px；
flex-shrink空间不足时子项缩小的比例
当空间不足时，子项会按照权重缩小，如果设置了最大最小宽度，则宽度会被锁死
比如A、B、C默认占用宽度为200px，需要收缩100px。因为A的flex-shrink为0，所以暂时不需要收缩；B的flex-shrink为2，则B的收缩宽度为1002 / (500 + 1002 + 501) 100 = 80px；C的收缩宽度为501/(500 +1002 +50*1) = 20px;最终尺寸A=50-0 = 50px；B= 100-80=20px；C=50-20=30px；
tip
- 使用弹性布局尽量不使用width
- 推荐使用flex简写，简写针对常用场景进行了优化
