【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，感受還有其餘問題

                                                   

在這裏，我就不解釋 這 三個屬性 是什麼意思了，由於我還要去洗澡，明天上班，繼續學習