父容器高度auto 子容器的高度和父容器一样填满

142 阅读1分钟

当row布局时,父容器的高度不固定会使用最大自容器的高度

居中.png

当父容器使用align-items: center;时候的样子,较小的容器并没有铺满

铺满.png

当不用的时候,默认是铺满的。其中word-break: break-word;是让文本自动换行

.notice-list-cell {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: auto;
		border-bottom: 1rpx solid #D5D9E2;
		box-sizing: border-box;
		overflow: hidden;


		.notice_name {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #AAAAAA;
			width: 35%;
			font-weight: 400;
			box-sizing: border-box;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 20rpx 20rpx 20rpx 20rpx;
			
		}

		.notice_content {
			display: flex;
			flex: 1;
			border-left: 1rpx solid #D5D9E2;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			box-sizing: border-box;
			color: #333333;
                        padding: 20rpx 20rpx 20rpx 20rpx;
			overflow: hidden;
			font-weight: 400;
			word-break: break-word;

		}

		.cell-info {
			display: flex;
			ont-family: PingFangSC-Medium;
			font-size: 25rpx;
			color: #2676C1;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			box-sizing: border-box;
			padding: 20rpx 10rpx 20rpx 10rpx;
			letter-spacing: 0;
			font-weight: 500;
			
		}
	}