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

最新推荐文章于 2024-11-20 11:00:00 发布

虾米大王

最新推荐文章于 2024-11-20 11:00:00 发布

阅读量1k

点赞数 24

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

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

版权

uniapp 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

文章详细展示了在Vue组件中使用Flex布局实现多行内容的换行和两边对齐，涉及不同方向和对齐方式的样式设置。

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

代码

<template>
	<view>
		<view>主轴可换行，两行两边对齐</view>
		<view class="box test1">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		<view>主轴可换行，两行两边对齐</view>
		<view class="box test2">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		<view>主轴可换行，两行两边对齐</view>
		<view class="box test3">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		
		<view>主轴可换行，两行两边对齐</view>
		<view class="box test4">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		<view>主轴可换行，两行两边对齐</view>
		<view class="box test5">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		<view>主轴可换行，两行两边对齐</view>
		<view class="box test6">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		
		<view>主轴可换行，两行两边对齐</view>
		<view class="box test7">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		<view>主轴可换行，两行两边对齐</view>
		<view class="box test8">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		<view>主轴可换行，两行两边对齐</view>
		<view class="box test9">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		
		<view>主轴可换行，两行两边对齐</view>
		<view class="box testa">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		<view>主轴可换行，两行两边对齐</view>
		<view class="box testb">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
		</view>
		<view>主轴可换行，两行两边对齐</view>
		<view class="box testc">
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></view>
			<view class="item"></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;
		
		.item{
			width: 30rpx;
			height: 30rpx;
			background-color: #333333;
			border-radius: 50%;
			margin: 10rpx 10rpx;
		}
	}
	
	.test1{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-content: space-between;
	}
	
	.test2{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: space-between;
	}
	
	.test3{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-between;
	}
	
	.test4{
		display: flex;
		flex-wrap: wrap-reverse;
		justify-content: flex-end;
		align-content: space-between;
	}
	
	.test5{
		display: flex;
		flex-wrap: wrap-reverse;
		justify-content: flex-start;
		align-content: space-between;
	}
	
	.test6{
		display: flex;
		flex-wrap: wrap-reverse;
		justify-content: center;
		align-content: space-between;
	}
	
	.test7{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-content: space-between;
	}
	
	.test8{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: space-between;
	}
	
	.test9{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-content: space-between;
	}
	
	.testa{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap-reverse;
		justify-content: flex-end;
		align-content: space-between;
	}
	
	.testb{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap-reverse;
		justify-content: flex-start;
		align-content: space-between;
	}
	
	.testc{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap-reverse;
		justify-content: center;
		align-content: space-between;
	}
</style>