flexbox佈局下flex:auto的元素沒有平均分佈

weixin_34236869發表於2018-10-23
4961141-975337c8b26fd7b2.png
修改前效果

4961141-0f55dfb72a7994b5.png
修改前樣式

如上圖,“詳情”和“取消服務”兩個元素都採用了相同的佈局樣式,flex-grow也都為1,代表平均分剩餘的空間,按理說這兩個元素的寬度應該是一致的。

但實際的效果就是左邊的詳情元素寬度明顯小於右邊的元素。

在仔細看了flex-grow的屬性說明之後,才發現問題出現在對【剩餘的】這幾個字的錯誤理解上。flex-grow對剩餘空間的平均分配是在父級元素寬度減去元素本身所佔寬度的前提下,再對剩餘的空間進行分配。

而在上面元素中,“取消服務”本來的就比“詳情”多出兩個文字的寬度,所以就算剩餘的空間平均分配了,右邊還是要比左邊寬。

知道問題所在之後,我們就有解決的方案了,先給元素設定相同的寬度(使用flex-basis屬性),然後再用flex-grow屬性,這時候兩邊的寬度就能保證相同了。

4961141-b6292beca49ecfca.png
修改後效果

4961141-4ddeeee11afd80a9.png
修改後樣式

相關文章