flex布局---容器内部，flex-basis属性

<template>
	<view class="father">
		<view class="son one">1</view>
		<view class="dauther two">2</view>
		<view class="son three">3</view>
		<view class="dauther four">4</view>
	</view>
</template>

<script></script>

<style>
	.father{
		display: flex;
		justify-content: space-between;
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: #ff5500;
		border-radius: 5px;
	}
	.dauther{
		width: 50px;
		height: 50px;
		background-color: #5500ff;
		border-radius: 5px;
	}
	.one{
		
	}
	.two{
		
	}
	.three{
		
	}
	.four{
		
	}
	
</style>

最初的样子

flex-basis属性定义了在分配多余空间之前，项目的占位大小
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex-basis: <length> | auto; /* default auto */

.one{
		flex-basis: 200px;
	}
	.two{
		flex-basis: 200px;
	}
	.three{
		
	}
	.four{
		
	}
	

.one{
		flex-basis: 400px;
	}
	.two{
		flex-basis: 300px;
	}
	.three{
		
	}
	.four{
		
	}