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

疑問(wèn)點(diǎn)
通常的話應(yīng)該不會(huì)出現(xiàn)高度自動(dòng)平分的情況，我這里出現(xiàn)的原因是因?yàn)橛疫吀叨茸詣?dòng)占比height:100%的緣故。flex布局中，align-content屬性（多根軸線對(duì)齊方式）的默認(rèn)值是stretch。對(duì)于stretch值的說(shuō)明：各行將會(huì)伸展以占用剩余的空間。如果剩余的空間是負(fù)數(shù)，該值等效于’flex-start’。在其它情況下，剩余空間被所有行平分，以擴(kuò)大它們的側(cè)軸尺寸。所以就會(huì)出現(xiàn)上面的情況。

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

// html結(jié)構(gòu) <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)">手機(jī)數(shù)碼</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">功能研發(fā)中，敬請(qǐng)期待{{index}}</view></view></view></view></view>// css樣式，只粘貼相關(guān)部分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布局相關(guān)問(wèn)題推薦查看綿羊萬(wàn)的這篇文章，通過(guò)圖案結(jié)合文字說(shuō)明的方式去理解會(huì)事半功倍
flex布局圖解，點(diǎn)擊查看

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。