前言
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布局图解，点击查看
