flex布局中flex-grow、flex-shrink、flex-basis的理解

flex-growflex-shrinkflex-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无效。

Comments