第一個應用：固定寬度+自適應佈局，

需求如下：左邊圖片定寬，圖示選中區域為自適應佈局

實現：這個比較簡單，父元素設定display: flex; 右邊子元素設定：flex-grow: 1，這樣子右邊會自動撐開空白的地方。

第二個應用：完全顯示的文字+超出省略的文字（兩邊都不定寬）：

需求如下：邀請時間完全顯示，暱稱超出後省略

實現：父容器設定為display：flex；邀請時間以往情況會使用float:right；但因為設定了flex佈局，浮動就變為無效了，又因為兩邊都不定寬，所以會出現以下兩種情況：

此時，給左邊的元素設定 flex-grow: 1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 這樣子出現左圖的情況時，左邊文字會省略，出現右邊情況時，左邊文字會撐開空白的地方：