修改前效果
修改前样式
如上图，“详情”和“取消服务”两个元素都采用了相同的布局样式，flex-grow也都为1，代表平均分剩余的空间，按理说这两个元素的宽度应该是一致的。
但实际的效果就是左边的详情元素宽度明显小于右边的元素。
在仔细看了flex-grow的属性说明之后，才发现问题出现在对【剩余的】这几个字的错误理解上。flex-grow对剩余空间的平均分配是在父级元素宽度减去元素本身所占宽度的前提下，再对剩余的空间进行分配。
而在上面元素中，“取消服务”本来的就比“详情”多出两个文字的宽度，所以就算剩余的空间平均分配了，右边还是要比左边宽。
知道问题所在之后，我们就有解决的方案了，先给元素设置相同的宽度（使用flex-basis属性），然后再用flex-grow属性，这时候两边的宽度就能保证相同了。
修改后效果
修改后样式
