uniapp初级入门-flex布局学习12-网格布局

最新推荐文章于 2024-07-25 16:21:45 发布

虾米大王

最新推荐文章于 2024-07-25 16:21:45 发布

阅读量599

点赞数 8

分类专栏： uniapp 文章标签： uni-app 学习 css

本文链接：https://blog.csdn.net/modern358/article/details/134994743

版权

uniapp 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

代码

<template>
	<view>
		<view class="grid">
			<view class="grid-cell">
				
			</view>
			<view class="grid-cell">
				
			</view>
			<view class="grid-cell">
				
			</view>
		</view>
		
		<view class="grid2">
			<view class="row test1"></view>
			<view class="row"></view>
			<view class="row"></view>
			<view class="row"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

.grid{
	width: 100%;
	height: 200rpx;
	display: flex;
	padding: 10rpx;
	
	.grid-cell{
		flex: 1;
		background-color: red;
		border: 1px solid white;
		box-sizing: border-box;
	}
}

.grid2{
	width: 100%;
	height: 200rpx;
	display: flex;
	padding: 10rpx;
	
	.row{
		flex: 1;
		background-color: yellow;
		border: 1px solid black;
		box-sizing: border-box;
	}
	
	.test1{
		flex: 0 0 50%;
	}
	
	
}
</style>