【CSS】虎躯一震！flex=1 和 flex-grow=1 居然不同！

在之前作项目的时候，使用 flex，并且当遇到 子元素 须要 占满剩余空间 的时候，习惯性的会添加 flex=1 这个属性。

不假思索，不作考虑，不作深究，坚决果断。

而刚好此时，同事把个人 flex=1 改为了 flex-grow=1，我一看，好像也能够，就没再多想。

可是看着网页发现不太对劲！！！！怎么设置了 flex-grow=1 的元素不是占满剩余元素？？？

而是把别人的地方也给占了一部分！！这是什么鬼！！！

而我改为了 flex=1 的时候，又恢复正常了！！！这特喵的什么

                                                      

 

因而我开始漫长的写 Demo 之路>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

因而我写了个 Demo ，发现了 真相！！！

1. 当 设置了 flex-grow 的子元素，里面没有文字内容的时候，是正常的！！
   
    
2. 真相就在这里！！！当我给 设置 了 flex-grow=1 的子元素，添加不少文字内容的时候！！
   那个子元素开始把其余兄弟元素的领地侵占了！！！！这能忍？？？？？
   
   
   而我把 flex-grow 改成 flex 的时候，一切又回到了最初的起点，perfect
   
   

 

因而我开始漫长的  找理由 之路>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

问题1：flex=1 和 flex-grow =1 有什么区别？？？？

1. flex = 1 的时候，设置了 三个属性
   flex-grow=1，flex-shrink=1，flex-basis=0%
    
2. 只设置 flex-grow =1 的时候
   flex-grow=1，flex-shrink=1（默认值），flex-basis=auto（默认值）

其实没有问题2，不要由于写了问题1，感受还有其余问题

                                                   

在这里，我就不解释 这 三个属性 是什么意思了，由于我还要去洗澡，明天上班，继续学习