flex-grow、flex-shrink、flex-basis这三个属性的作用是：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素的空间的。

flex-basis

该属性来设置该元素的宽度。 当然，width也可以用来设置元素宽度。如果元素上同时设置了width和flex-basis,那么flex-basis会覆盖width的值。他的默认值为auto

flex-grow

该属性来设置，当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。默认值为0

示例代码: http://runjs.cn/code/mwprzdop

flex-shrink

该属性来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。默认值为1

示例代码: http://runjs.cn/code/54jqeffn

总结

如果父级的空间足够：flex-grow有效，flex-shrink无效。

如果父级的空间不够：flex-shrink 有效，flex-grow无效。