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

<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-shrink属性定义了项目的缩小比例，即如果空间不足，该项目将缩小。

flex-shrink: <number>; /* default 1 */

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

<style>
	.father{
		display: flex;
		justify-content: space-between;
		/* 父容器限定宽度 */
		width: 200px;
		border: 2px solid #bbcccb;
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: #ff5500;
		border-radius: 5px;
	}
	.dauther{
		width: 50px;
		height: 50px;
		background-color: #5500ff;
		border-radius: 5px;
	}
	.one{
		flex-shrink: 1;
	}
	.two{
		flex-shrink: 1;
	}
	.three{
		flex-shrink: 1;
	}
	.four{
		flex-shrink: 1;
	}
	
</style>

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

.one{
		flex-shrink: 0;
	}

.one{
		flex-shrink: 0;
	}
	.two{
		flex-shrink: 1;
	}
	.three{
		flex-shrink: 2;
	}
	.four{
		flex-shrink: 4;
	}