flex:1

flex属性是flex-grow, flex-shrink 和 flex-basis的简写

默认值为0 1 auto（后两个属性可选）。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

flex-grow：

定义项目的的放大比例

默认为 0，即 即使存在剩余空间，也不会放大； 所有项目的 flex-grow 为 1：等分剩余空间（自动放大占位）； flex-grow 为 n 的项目，占据的空间（放大的比例）是 flex-grow 为 1 的 n 倍。

flex-shrink：

定义项目的缩小比例

默认为 1，即 如果空间不足，该项目将缩小；

所有项目的 flex-shrink 为 1：当空间不足时，缩小的比例相同；

flex-shrink 为 0：空间不足时，该项目不会缩小；

flex-shrink 为 n 的项目，空间不足时缩小的比例是 flex-shrink 为 1 的 n 倍。

flex-basis:

定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间

默认值为 auto，即 项目原本大小；

设置后项目将占据固定空间。

总结

当一个容器设置display:flex变成一个flex容器后，如果容器没有被占满，换言之有剩余空间，则flex-grow起作用。 相反，若空间不足，则flex-shrink起作用。 在计算放大或缩小比例时，要根据flex-basis的值来计算比例。