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>
相关推荐
原来是好奇心几秒前
深入Spring Boot源码(六):Actuator端点与监控机制深度解析
java·开发语言·源码·springboot
new code Boy5 分钟前
escape谨慎使用
前端·javascript·vue.js
奶球不是球6 分钟前
elementplus组件中el-calendar组件自定义日期单元格内容及样式
javascript·css·css3
过期动态24 分钟前
JDBC高级篇:优化、封装与事务全流程指南
android·java·开发语言·数据库·python·mysql
WizLC25 分钟前
【Java】各种IO流知识详解
java·开发语言·后端·spring·intellij idea
傻啦嘿哟34 分钟前
实战:用Splash搞定JavaScript密集型网页渲染
开发语言·javascript·ecmascript
Knight_AL37 分钟前
Java 线程池预热(Warm-up)实战:开启与不开启到底差多少?
java·开发语言
liwulin05061 小时前
【PYTHON】COCO数据集中的物品ID
开发语言·python
小鸡吃米…1 小时前
Python - XML 处理
xml·开发语言·python·开源
冰敷逆向1 小时前
苏宁滑块VMP深入剖析(一):解混淆篇
javascript·爬虫·安全·web