这是MDN上关于flex取值的解释： CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。
-
initial元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"
flex: 0 1 auto"。 -
auto元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "
flex: 1 1 auto". -
none元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"
flex: 0 0 auto"。 -
1相当于将属性设置为"
flex: 1 1 0%"。
总结：
1.flex: 1,是由flex-grow: 1;flex-shrink:1;flex-basis:0%; 三个css属性组合成。
2.当设置flex-basis:50px;时候，会在50px的基础上进行伸缩
3.当设置flex:none时候，按照原来盒子的大小，不会伸缩，可能会造成内容溢出
