flex垂直布局,容器间距相等

javascript 复制代码
<div
	style="
		width: 170px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	">
	<div
		class="tj_box"
		:style="{
			backgroundColor: fullscreen ? boxBgColor : '#1677ff',
		}"
	>
		<div class="tj_tit">客户总数</div>
		<div>{{ hzData.customer_num }}</div>
	</div>
	<div
		class="tj_box"
		:style="{
			backgroundColor: fullscreen ? boxBgColor : '#ff8f1f',
		}"
	>
		<div class="tj_tit">合同总数</div>
		<div>{{ hzData.compact_num }}</div>
	</div>
	<div
		class="tj_box"
		:style="{
			backgroundColor: fullscreen ? boxBgColor : '#00bfd0',
		}"
	>
		<div class="tj_tit">销项合同金额</div>
		<div>{{ hzData.xx_compact_money }}</div>
	</div>
	<div
		class="tj_box"
		:style="{
			backgroundColor: fullscreen ? boxBgColor : '#f93a4a',
		}"
	>
		<div class="tj_tit">进项合同金额</div>
		<div>{{ hzData.jx_compact_money }}</div>
	</div>
</div>
<style scoped>
.tj_box {
	height: 100px;
	border-radius: 8px;
	/* margin-bottom: 10px; */
	text-align: center;
	font-size: 18px;
	box-sizing: border-box;
	padding-top: 20px;
	color: #fff;
}
</style>
相关推荐
ZTLJQ4 小时前
序列化的艺术:Python JSON处理完全解析
开发语言·python·json
2401_891482175 小时前
多平台UI框架C++开发
开发语言·c++·算法
88号技师5 小时前
2026年3月中科院一区SCI-贝塞尔曲线优化算法Bezier curve-based optimization-附Matlab免费代码
开发语言·算法·matlab·优化算法
t198751285 小时前
三维点云最小二乘拟合MATLAB程序
开发语言·算法·matlab
A_nanda6 小时前
根据AI提示排查vue前端项目
前端·javascript·vue.js
m0_726965986 小时前
面面面,面面(1)
java·开发语言
2401_831920746 小时前
分布式系统安全通信
开发语言·c++·算法
~无忧花开~6 小时前
React状态管理完全指南
开发语言·前端·javascript·react.js·前端框架
@大迁世界7 小时前
1.什么是 ReactJS?
前端·javascript·react.js·前端框架·ecmascript
阿贵---7 小时前
C++中的RAII技术深入
开发语言·c++·算法