前言
flex布局中，通常我們都希望子元素的高度是自適應、自動被內容撐開，我們的做法基本是直接display:flex，不需要額外再去設置其他屬性就會得到下面的效果。但是最近使用uniapp模擬產品分類demo的時候，發現flex布局后，高度在右邊的‘功能研發中，敬請期待’盒子比較少的情況下竟然自動被平分了，而不是根據內容自適應高度了，如下面的圖片（如果盒子比較多，一屏裝不下的時候不會被平分，還是由內容撐開）。

疑問點
通常的話應該不會出現高度自動平分的情況，我這里出現的原因是因為右邊高度自動占比height:100%的緣故。flex布局中，align-content屬性（多根軸線對齊方式）的默認值是stretch。對于stretch值的說明：各行將會伸展以占用剩余的空間。如果剩余的空間是負數，該值等效于’flex-start’。在其它情況下，剩余空間被所有行平分，以擴大它們的側軸尺寸。所以就會出現上面的情況。

解決方案
其實很簡單，直接去設置align-content的屬性值為flex-start，或者其他你想要的效果值即可。

// html結構 <view class="container"><view class="left"><view class="good-class" :class="{'active': active === index}" v-for="(item,index) in 30" :key="index" @click="handleSelectClass(index)">手機數碼</view></view><view class="right"><view class="good-item" v-for="(item,index) in 5" :key="index"><view class="good-img"><view class="img-desc">功能研發中，敬請期待{{index}}</view></view></view></view></view>// css樣式，只粘貼相關部分css .container {position: absolute;bottom: 0;top: 0;left: 0;right: 0;overflow: hidden;display: flex;.left {width: 200rpx;height: 100%;background-color: #f7f7f7;text-align: center;overflow: auto;}.right {flex: 1;overflow: auto;padding: 20rpx;display: flex;flex-wrap: wrap;align-content: flex-start;height: 100%;.good-item{width: 50%;}}}

更多flex布局相關問題推薦查看綿羊萬的這篇文章，通過圖案結合文字說明的方式去理解會事半功倍
flex布局圖解，點擊查看

總結

以上是生活随笔為你收集整理的flex布局均分高度了，没有自适应内容高度，怎么回事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。