CSS例子: 横向排列的格子

效果

HTML

	<view class="content"><view class="item" v-for="item of 5">{{item}}</view></view>

CSS

	.content {height: 100vh;display: flex;flex-direction: row; flex-wrap: wrap;align-content: flex-start;background-color: aqua;}.item {width: 25%;height: 100rpx;border: 3rpx blueviolet solid;background-color: aquamarine;}

tailwindcss

	<view class="h-full flex flex-row flex-wrap content-start bg-green-600"><view class="w-1/4 h-[100rpx] border-[3rpx] border-solid border-black bg-red-600" v-for="item of 5">{{item}}</view></view>