flex-grow 和flexbasis 怎么感觉有点类似都可以平分？

老师怎么一下回复了那么多条重复的

同学你好，对于你的问题解答如下：

1. flex-grow 可以实现均分效果，flex-basis是设置元素的伸缩的基准值， 两者的是不同的概念。

   （1）flex-grow：用于设置或检索弹性盒子的扩展比率。简单理解就是：根据父元素在空间分配方向上还有剩余空间时，设置图和分配这些剩余空间

   示例：当只给弹性盒子设置flex-grow属性，默认会均分父元素剩余的空间。

   

   
   

   （2）flex-basis：属性用于设置或检索弹性盒伸缩基准值。简单理解就是设置弹性盒子占据的空间。示例：设置flex-basis的值，那么每个盒子默认占据的空间就是200px，并不会均分父元素的空间。

   

   效果图：

   

2. flex:1; 是flex: 1 1 0%；的缩写；可以通过控制台查看元素获取，如下图所示：

   

   flex: auto; 是flex: 1 1 auto;的缩写。

   
   

   0%和auto对应的是flex-basis属性，均分父元素是flex-grow属性起的作用。

   auto和0%之间的区别，具体可以参考如下解析：

   （1）flex：auto;的情况

   

   效果图：每个项目文字到项目边界之间的距离是相等的

   
   

   （2）设置flex:1;后, 效果图如下所示， 每个项目占据的空间是相等的

   

   
   

3. flex-basis的默认值是auto。

   由第二条分析可知，均分父元素剩余空间是flex-grow属性起的作用，flex-basis设置的是每个弹性盒子占据空间的方式，所以说不影响是否沾满父元素，而是设置弹性盒子的占据的空间大小。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~