flex布局---justify-content属性，决定排列的对齐方式

<template>
	<view class="father">
		<view class="son">1</view>
		<view class="dauther">2</view>
		<view class="son">3</view>
		<view class="dauther">4</view>
		<!-- <view class="son">5</view>
		<view class="dauther">6</view>
		<view class="son">7</view>
		<view class="dauther">8</view>
		<view class="son">9</view>
		<view class="dauther">10</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.father{
		display: flex;
		
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: #ff5500;
	}
	.dauther{
		width: 50px;
		height: 50px;
		background-color: #5500ff;
	}
	
</style>

首先是没有对齐方式的时候

justify-content:
 flex-start | flex-end | center | space-between | space-around;

左对齐

.father{
		display: flex;
		justify-content: flex-end;
	}

右对齐

.father{
		display: flex;
		justify-content: flex-end;
	}

居中对齐

.father{
		display: flex;
		justify-content: center;
	}

分布对齐

.father{
		display: flex;
		justify-content: space-around;
	}

两端对齐

		display: flex;
		justify-content: space-between;
	}