你真的知道flex: 1；是什么意思吗？

情景复现

大佬提问：“你知道flex: 1;的更深层次的内容吗？”

 

我的回答：“

        flex:1实际代表的是三个属性的简写

        flex-grow是用来增大盒子的，比如，当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比

        flex-shrink用来设置子盒子超过父盒子的宽度后，超出部分进行缩小的取值比例

        flex-basis是用来设置盒子的基准宽度，并且basis和width同时存在basis会把width干掉

        所以flex：1；的逻辑就是用flex-basis把width干掉，然后再用flex-grow和flex-shrink增大的增大缩小的缩小，达成最终的效果。