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;
					}
				}
			}
		}
	
		
	}