uniapp初级入门-flex布局学习02-justify-content属性

<template>
	<view class="justify">
		<view>justify-content属性定义了项目在主轴上的对齐方式。</view>
		<view class="flex-start">
			<view class="item">
				item1
			</view>
			<view class="item">
				item2
			</view>
			<view class="item">
				item3
			</view>
		</view>
		<view class="flex-end">
			<view class="item">
				item4
			</view>
			<view class="item">
				item5
			</view>
			<view class="item">
				item6
			</view>
		</view>
		<view class="center">
			<view class="item">
				item7
			</view>
			<view class="item">
				item8
			</view>
			<view class="item">
				item9
			</view>
		</view>
		
		<view class="space-between">
			<view class="item">
				itema
			</view>
			<view class="item">
				itemb
			</view>
			<view class="item">
				itemc
			</view>
		</view>
		
		<view class="space-around">
			<view class="item">
				itemx
			</view>
			<view class="item">
				itemy
			</view>
			<view class="item">
				itemz
			</view>
		</view>
		
		<view>
			flex-start（默认值）：左对齐
			flex-end：右对齐
			center： 居中
			space-between：两端对齐，项目之间的间隔都相等。
			space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
		</view>
	</view>
</template>

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

<style lang="scss">
.flex-start{
	display: flex;
	justify-content: flex-start;
	margin-bottom: 50rpx;
	.item{
		width: 100rpx;
		height: 100rpx;
		background-color: red;
		color: white;
	}
}

.flex-end{
	display: flex;
	justify-content: flex-end;
	margin-bottom: 50rpx;
	.item{
		width: 100rpx;
		height: 100rpx;
		background-color: yellow;
		color: white;
	}
}

.center{
	display: flex;
	justify-content: center;
	margin-bottom: 50rpx;
	.item{
		width: 100rpx;
		height: 100rpx;
		background-color: blue;
		color: white;
	}
}

.space-between{
	display: flex;
	justify-content: space-between;
	margin-bottom: 50rpx;
	.item{
		width: 100rpx;
		height: 100rpx;
		background-color: orange;
		color: white;
	}
}

.space-around{
	display: flex;
	justify-content: space-around;
	margin-bottom: 50rpx;
	.item{
		width: 100rpx;
		height: 100rpx;
		background-color: purple;
		color: white;
	}
}
</style>