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
无效。