如何轻松掌握flex子元素的两个属性的作用 flex是什么意思 _生活经验

点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
大家好！我是/小郑搞码事/的小郑
今天给大家分享，flex子元素的两个属性：flex-grow/flex-basis的使用。
这两个属性使用上非常简单容易记住。
以下实例父元素的设置display:flex（父元素是div0）。
<div class="div0"> <div class="box1"></div> <div class="box2"></div> </div>一、flex-basisbasis的意思是基?。?基准，主要的。所以当它和宽度width放一块时，它的值会覆盖width 。
看例子：

文章插图
上面代码，我父元素的总宽度是400PX，子元素box1的宽度设置为200PX，关键是将子元素的flex-basis属性设置300PX 。看一下实际表现的大?。?

文章插图
300PX，所以flex-basis会覆盖width 。
二、flex-growgrow的意思是扩大，成长，增加。也就是说，当父元素有剩余空间的时候，子元素会分享这些剩余空间。至于如何分享就根据具体设置的值来看。值越大分享的越厉害。
看一下不分配的时候

文章插图
效果图

文章插图
现在我来给第一个子元素设置flex-grow属性，第二个子元素不设置
.div1{
flex-grow:1
}
所以剩余空间全部被第一个子元素占用。100PX+剩余空间(100PX)

文章插图
接下来我再给第二个元素设置flex-grow=2 。那么剩余空间的1/(1+2)给第一个元素， 2/(1+2)给第二个元素。所以：
第一个元素的宽度：100PX + 100PX(1/(1+2))
第二个元素的宽度：200PX+100PX(2/(1+2))

文章插图
总结一下【如何轻松掌握flex子元素的两个属性的作用 flex是什么意思】今天先记住父元素为display=flex时，子元素flex-grow/flex-basis的使用，后面深入的知识才好理解，而实际应用中，还是基础的占主要。