uni-app flex上下布局 底部固定高度，上面图标居中

html

<view>
	<view class="da-flex">
		<view class="da-flex-top">
			<view class="da-img">
				<img src="xxx.png"/>
			</view>
		</view>
		<view class="da-flex-bottom">
			111
		</view>
	</view>
</view>

css

.da-flex{
	display: flex;
	flex-flow: column;
	flex-direction:  column;
	width: 100%;
	height: 98vh;
	border: 1px solid #5F91FF;
	background-color: #5F91FF;
}
.da-flex .da-flex-top{
	flex: auto;
	position: relative;
	border: 1px solid salmon;
}
.da-flex .da-flex-bottom{
	flex: 0 0 600px;
	border: 1px solid #FFFF00;
	background-color: #FFFF00;
}
.da-flex .da-flex-top .da-img{
	width: 300px;
	height: 300px;
	text-align: center;
	background-color: aquamarine;
	position: absolute;
	top: 40%;
	margin: 0 auto;
	left: 48%;
	transform: translate(-40%, -48%);
}

在此基础上在进行微调就能达到其他效果

小结： 这部分的要点在于height: 100vh; 在百分比的相对定位中，可以 100vh之类的设置高度，这样子在底部固定600px的时候，上面的就可以用flex-grow填充满，然后在进行定位居中。

原创内容转载请注明出处