flex:1 到底代表什么?

flex:1 到底代表什么?
方便自己学习，原作者博客链接：https://zhuanlan.zhihu.com/p/136223806


利用 flex: 1; 确实实现了三个不同内容的 div 平分空间, 所以按我以前的想法来说:

flex: 1; === flex: 1 1 auto;


于是我就又做了几个实验, 改了一下 flex-basis 的参数, 得出以下结论

flex: 1; === flex: 1 1 任意数字+任意长度单位;
可以看出最重要的一点在 第三个参数 flex-basis 上, 我们再来回顾以下 这个属性的作用

flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
auto 为表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小, 所以出现了上图中三个盒子不一样大的情况

那我们如果随便设置一个其他带有长度单位的数字呢, 那么他就不会按项目本身来计算, 所以它不关心内容, 只是把空间等比收缩和放大