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