uniapp初级入门-flex布局学习10-骰子四点演示二

最新推荐文章于 2024-08-13 14:54:30 发布

虾米大王

最新推荐文章于 2024-08-13 14:54:30 发布

阅读量628

点赞数 7

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

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

版权

uniapp 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

这篇文章详细描述了一个使用Vue编写的HTML模板，展示了如何利用CSS（特别是SCSS）实现一个包含两个列的网格布局，每个单元格（item）是150x150px的圆形，使用flexbox进行空间分布。

摘要由CSDN通过智能技术生成

代码

<template>
	<view>
		<view class="box">
			<view class="column">
				<view class="item"></view>
				<view class="item"></view>
			</view>
			<view class="column">
				<view class="item"></view>
				<view class="item"></view>
			</view>
		</view>
	</view>
</template>

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

<style lang="scss">
	.box{
		width: 150rpx;
		height: 150rpx;
		background-color: #E7E7E7;
		border-radius: 50rpx;
		padding: 30rpx;
		
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		
		.column{
			
			display: flex;
			flex-basis: 100%;
			justify-content: space-between;
		}
		
		.item{
			width: 30rpx;
			height: 30rpx;
			background-color: #333333;
			border-radius: 50%;
			margin: 5rpx 5rpx;
		}
	}
	
	
</style>