处理flex布局

点击查看代码

	<view class="recommend-view">
		<view class="title-view">
			热门推荐
		</view>
		<view class="book-list">
			<view class="book-item" v-for="item in list" :key="item.id" @click="listJump(item.anid)">
				<image class="book-img" :src="item.coverpic"></image>
				<view class="book-text ell2">{{item.title}}</view>
			</view>

		</view>
	</view>

	————————————————————
	.recommend-view {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx;
		padding-right: 0;

		.title-view {
			font-size: 20px;
			font-weight: 800;
		}

		.book-list {
			display: flex;
			flex-wrap: wrap;

			.book-item {
				width: 210rpx;
				margin-top: 30rpx;
				margin-right: 30rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				.book-img {
					width: 180rpx;
					height: 252rpx;
					margin-bottom: 10rpx;
					border: 1px solid rgb(107, 107, 109);
					border-radius: 20rpx;

				}

				.book-text {
					font-size: 28rpx;
				}
			}
		}
	}