彈性布局使用了很久了，一直停留在基本的用法，比如橫向布局，豎向布局，垂直居中，水平居中，著實非常好用，當然，超低版本安卓有一些相容性問題，但是總會出現一些奇奇怪怪的問題，比如橫向排列的時候，其中的乙個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/*左側文字*/
.left/*右側icon和標識文字盒子*/
.right
參考鏈結且推薦好文：
彈性盒子模型屬性之flex grow
在學習彈性盒子模型的時候,有幾個屬性常常讓同學們感覺頭痛,不知到最後得到的效果數值到底是怎樣計算得來的,那麼不要慌,穩住,我們能贏 今天就讓我們先來看看flex grow這個屬性 flex grow 定義專案的放大比例，預設值為0，就算存在剩餘空間，也不會放大。下面的例子中沒有定義該屬性，是不會擁有...
CSS flex布局中的flex grow詳解
父級元素稱為 容器 container 容器子元素成為 專案 item div class container div class box box1 1 div div class box box2 2 div div class box box3 3 div div class box box4 ...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...