flex布局---flex-wrap属性，决定排列是否换行

flex-wrap: nowrap | wrap | wrap-reverse;
flex-wrap属性，默认情况不换行nowrap

<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>

换行

.father{
		display: flex;
		flex-wrap: wrap;
	}

倒数换行，第一行在下面

.father{
		display: flex;
		flex-wrap: wrap-reverse;
	}

最后，flex-direction和flex-wrap的简写属性为：flex-flow

flex-flow: <flex-direction> || <flex-wrap>;

.father{
		display: flex;
		flex-flow: row-reverse wrap; 
	}