flexbox佈局下flex：auto的元素沒有平均分佈
修改前效果
修改前樣式
如上圖，“詳情”和“取消服務”兩個元素都採用了相同的佈局樣式，flex-grow也都為1，代表平均分剩餘的空間，按理說這兩個元素的寬度應該是一致的。
但實際的效果就是左邊的詳情元素寬度明顯小於右邊的元素。
在仔細看了flex-grow的屬性說明之後，才發現問題出現在對【剩餘的】這幾個字的錯誤理解上。flex-grow對剩餘空間的平均分配是在父級元素寬度減去元素本身所佔寬度的前提下，再對剩餘的空間進行分配。
而在上面元素中，“取消服務”本來的就比“詳情”多出兩個文字的寬度，所以就算剩餘的空間平均分配了，右邊還是要比左邊寬。
知道問題所在之後，我們就有解決的方案了，先給元素設定相同的寬度（使用flex-basis屬性），然後再用flex-grow屬性，這時候兩邊的寬度就能保證相同了。
修改後效果
修改後樣式
相關文章
- css flex佈局中妙用margin: autoCSSFlex
- flex佈局（彈性佈局）Flex
- flex 佈局Flex
- Flex佈局Flex
- 浮動佈局 和 flex佈局Flex
- dispaly的Grid佈局與Flex佈局Flex
- html的flex佈局？HTMLFlex
- css flex佈局CSSFlex
- flex佈局原理Flex
- 馬蹄疾 | 聊聊你可能並沒有完全掌握的 Flex 佈局Flex
- iOS 上的 FlexBox 佈局iOSFlex
- flex彈性佈局 響應式佈局Flex
- Flexbox——快速佈局神器Flex
- 重溫 Flex 佈局Flex
- Flex佈局應用Flex
- flex佈局屬性Flex
- flex 佈局：語法Flex
- 淺談Flex佈局Flex
- flex佈局實戰Flex
- flex佈局筆記Flex筆記
- flex佈局學習Flex
- flex佈局——轉載Flex
- ReactNative flex 佈局ReactFlex
- CSS display: flex佈局CSSFlex
- Flex佈局-子項Flex
- 【佈局技巧】Flex 佈局下居中溢位滾動截斷問題Flex
- Android上的Flexbox佈局AndroidFlex
- 詳解CSS的Flex佈局CSSFlex
- CSS Flex 佈局的引入背景CSSFlex
- iOS Flexbox 佈局優化iOSFlex優化
- React Native佈局（flexbox）React NativeFlex
- 聖盃佈局進階版-flex佈局實現Flex
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- 簡單理解flex佈局Flex
- Flex-彈性佈局Flex
- display:flex 彈性佈局Flex
- 玩遊戲 學Flex佈局遊戲Flex
- 移動端flex佈局Flex