一、背景
彈性布局使用了很久了，一直停留在基本的用法，比如橫向布局，豎向布局，垂直居中，水平居中，着實非常好用，當然，超低版本安卓有一些兼容性問題，但是總會出現一些奇奇怪怪的問題，比如橫向排列的時候，其中的一個icon 元素會被截斷，因為沒有設固定寬度，之前是通過設定min-width，max-width來解決的，今天重新理了下flex 相關語法，發現以下三個屬性簡直是好用啊！
二、基本概念理解
flex-grow：控制剩余空間是否放大，默認0，剩余也不放大，適合不確定文字數量自適應寬度
flex-shrink：控制空間不夠的時候是否縮小，默認1，即如果空間不夠則縮小，可以正常展示全該展示的東西，比如icon、圖片等，如果設為0，則會出現超出截斷的問題
flex-basis ：定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小
flex屬性：flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
**速記方法**
0：false，即不會縮小/不會放大
1：true，即會縮小/會放大
三、實現
如果實現左側文字長度不確定，右側展示icon和不確定長度的標識文案的banner, 且文案超出一定寬度會自動換行，且希望icon始終展示在右側，寫法如下：
/*外層盒子*/
.container{ display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-around;
} /*左側文字*/ .left{ overflow: hidden !important; text-overflow: ellipsis !important; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; white-space: nowrap; word-wrap: break-word; word-break: break-all;
/* 彈性布局，空間有剩余，允許占用剩余空間，如果要收縮，也可以收縮，因為會切換為兩行，auto則代表寬度始終為實際寬度*/ flex: 1 1 auto;
} /*右側icon和標識文字盒子*/ .right{
/*彈性布局，icon及其他標識文案，寬度不固定，則flex-basis:auto，始終為實際寬度，但是不能被截斷，也不要占用多余的空間，多余的給文字使用，即不允許占用多余空間，也不允許收縮*/ flex:0 0 auto;
}
參考鏈接且推薦好文：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html