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

2019独角兽企业重金招聘Python工程师标准>>>

在以前做项目的时候，使用 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，感觉还有其他问题

                                                   

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

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/u/3060934/blog/1583663