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

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

最初的样子

.one{
		/* flex-grow: ; 默认值是0 */
	}
	.two{
		flex-grow: 1;
	}
	.three{
		flex-grow: 2;
	}
	.four{
		flex-grow: 3;
	}

flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

.one{
		/* flex-grow: ; 默认值是0 */
	}
	.two{
		flex-grow: 1;
	}
	.three{
		flex-grow: 1;
	}
	.four{
		flex-grow: 1;
	}

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

.one{
		/* flex-grow: ; 默认值是0 */
	}
	.two{
		flex-grow: 2;
	}
	.three{
		flex-grow: 1;
	}
	.four{
		flex-grow: 1;
	}