本文主要是介绍flex布局在多层嵌套时，内层设置了justify-content: space-between；不生效问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
内层的地址和时间这一行，设置了justify-content: space-between;但并不生效，原因是要在上一层.center 设置 flex:1;（ 重点）
经常忘记，特在此记录一下，以下是代码
<view class="index-card" @click="showDetail(item)"><view class="card-top"><u-avatar size="50" :src="this.$utils.baseUrl+'/file/download/'+item.avatar"></u-avatar><view class="center"><view><u--text size="30rpx" :lines="2" :text="item.name"></u--text></view><view class="card-bottom"><view class="location"><uni-icons type="location" size="15"></uni-icons><view class="address">{{item.city}} · {{item.address}}</view></view><view class="time">{{item.createTime}}</view></view></view></view><view class="uni-list--border-bottom"></view></view>
.index-card {padding: 15px 15px;background-color: #ffffff;margin-top: 5px;.card-top {color: $uni-color-title;display: flex;flex-direction: row;align-items: center;.center {font-size: $font-lg;margin-left: 10px;flex:1;.card-bottom {color: $font-color-light;font-size: 26rpx;margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;.location {display: flex;flex-direction: row;align-items: center;.address {width: 400rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}.time {color: $color-primary;}}}}}
这篇关于flex布局在多层嵌套时，内层设置了justify-content: space-between；不生效问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
