修改前效果
修改前樣式
如上圖申屹，“詳情”和“取消服務(wù)”兩個元素都采用了相同的布局樣式，flex-grow也都為1，代表平均分剩余的空間签餐，按理說這兩個元素的寬度應(yīng)該是一致的。
但實(shí)際的效果就是左邊的詳情元素寬度明顯小于右邊的元素盯串。
在仔細(xì)看了flex-grow的屬性說明之后氯檐，才發(fā)現(xiàn)問題出現(xiàn)在對【剩余的】這幾個字的錯誤理解上。flex-grow對剩余空間的平均分配是在父級元素寬度減去元素本身所占寬度的前提下体捏，再對剩余的空間進(jìn)行分配冠摄。
而在上面元素中，“取消服務(wù)”本來的就比“詳情”多出兩個文字的寬度几缭，所以就算剩余的空間平均分配了河泳，右邊還是要比左邊寬。
知道問題所在之后年栓，我們就有解決的方案了拆挥，先給元素設(shè)置相同的寬度（使用flex-basis屬性），然后再用flex-grow屬性某抓，這時候兩邊的寬度就能保證相同了纸兔。
修改后效果
修改后樣式
