flex布局在多层嵌套时,内层设置了justify-content: space-between;不生效问题

 内层的地址和时间这一行,设置了justify-content: space-between;但并不生效,原因是要在上一层.center 设置 flex:1;( 重点)

经常忘记,特在此记录一下,以下是代码


					
						
						
							
							
								
									
									{{item.city}} · {{item.address}}
								
								
									{{item.createTime}}
								
							
						
					
					
				

flex布局在多层嵌套时,内层设置了justify-content: space-between;不生效问题_第1张图片

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

 

你可能感兴趣的:(前端,javascript,html)