blindDate/pages/test/test.vue

<template>
	<view>
		<!-- <view class="content"> -->
			<!-- float 方案 -->
			<!-- <view class="item" :class="{'max-item': item == 0}" v-for="item in 6">{{ item + 1 }}</view> -->
			
			<!-- flex 方案 -->
			<!-- <view class="lf-flex-wrap">
				<view class="flex" 
					:style="{order: item + 1}"
					:class="{'flex-max': item == 0}" 
					v-for="item in 6"
				>{{ item + 1 }}</view>
			</view> -->
		<!-- </view> -->
		
		 <div class="box-wrapper">
		      <div style="margin-top:0px" class="box"></div>
		      <div class="box spe"></div>
		      <div class="box spe"></div>
		      <div class="box spe"></div>
		      <div class="box spe"></div>
		      <div class="box"></div>
		      <div class="box"></div>
		      <div class="box spe"></div>
		      <div class="box spe"></div>
		  </div>
	</view>
</template>

<style>
	page{
		background-color: #F6F6F6;
	}
</style>
<script>
	export default {
		data(){
			return {
				
			}
		},
		onLoad(){
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.box{
		height: 123px;
		padding: 1em;
		margin-top: 1em;
		-moz-page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		border: 1px solid #000;
		background: #909090;
	}
	.spe{
		height: 225px;
	}
	.box-wrapper{
		-moz-column-count:4; /* Firefox */
		-webkit-column-count:4; /* Safari 和 Chrome */
		column-count:4;
		-moz-column-gap: 1em;
		-webkit-column-gap: 1em;
		column-gap: 1em;
	}
	
	.content{
		width: 750rpx;
		height: max-content;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 27rpx;
		overflow: hidden;
		
		.flex{
			width: 222rpx;
			height: 222rpx;
			background-color: #DD6161;
			margin: 5rpx;
		}
		.flex-max{
			width: 454rpx;
			height: 454rpx;
		}
		
		
		/* float
		.item{
			width: 222rpx;
			height: 222rpx;
			background-color: #DD6161;
			float: left;
			margin: 5rpx;
		}
		.max-item{
			width: 454rpx;
			height: 453rpx;
		}
		*/
	}
</style>