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>
相关推荐
coder!mq24 分钟前
说几个常见的语法糖?
java·开发语言·算法
gugucoding26 分钟前
38. 【Java】Stream API(下):高级操作与性能
java·开发语言
Lhan.zzZ34 分钟前
在 Visual Studio 2022 中打造可扩展的动态链接库模块:从零搭建到原理解析
开发语言·c++·visual studio
心平气和量大福大1 小时前
android-实例-蒲公英-更新与安装-5-签名与生成APK
android·java·开发语言
码哥DFS1 小时前
构造函数、实例对象、对象原型 ----三者关系
开发语言·javascript·原型模式
满栀5851 小时前
vue动态路由效果
前端·javascript·vue.js·前端框架·vue
quantdash_cc2 小时前
告别自建 Requests/BS4 网页爬虫:基于 QuantDash 搭建零维保的高性能量化行情流水线
开发语言·爬虫·python·pandas·量化·quantdash
ydd1001002 小时前
寻找两个正序数组的中位数 Java 题解,二分分割详解
java·开发语言
半亩码田2 小时前
C#转Python第3.1篇:Python 的 class 没有访问修饰符?面向对象的另一条路
开发语言·python·c#
Wzx1980123 小时前
python沙箱和docker沙箱你选对了吗?
开发语言·python·docker