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>
相关推荐
一 乐5 小时前
婚纱摄影网站|基于ssm + vue婚纱摄影网站系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot·后端
Boilermaker19926 小时前
[Java 并发编程] Synchronized 锁升级
java·开发语言
MM_MS6 小时前
Halcon变量控制类型、数据类型转换、字符串格式化、元组操作
开发语言·人工智能·深度学习·算法·目标检测·计算机视觉·视觉检测
꧁Q༒ོγ꧂6 小时前
LaTeX 语法入门指南
开发语言·latex
njsgcs6 小时前
ue python二次开发启动教程+ 导入fbx到指定文件夹
开发语言·python·unreal engine·ue
alonewolf_996 小时前
JDK17新特性全面解析:从语法革新到模块化革命
java·开发语言·jvm·jdk
古城小栈7 小时前
Rust 迭代器产出的引用层数——分水岭
开发语言·rust
ghie90907 小时前
基于MATLAB的TLBO算法优化实现与改进
开发语言·算法·matlab
恋爱绝缘体17 小时前
2020重学C++重构你的C++知识体系
java·开发语言·c++·算法·junit
wuk9987 小时前
VSC优化算法MATLAB实现
开发语言·算法·matlab