flex-grow、flex-shrink、flex-basis详解

71 阅读 0 评论 47 点赞

我是靠谱客的博主可耐耳机，最近开发中收集的这篇文章主要介绍flex-grow、flex-shrink、flex-basis详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

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

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

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

flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。

flex-shrink
定义项目的缩小比例，默认值为1，注意前提是空间不足的情况下，看例子。

该属性来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。
flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。

总结

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

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

以上就是可耐耳机为你收集整理的flex-grow、flex-shrink、flex-basis详解的全部内容，希望文章能够帮你解决flex-grow、flex-shrink、flex-basis详解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。