flex布局在多层嵌套时,内层设置了justify-content: space-between;不生效问题

news2024/11/15 12:28:46

 内层的地址和时间这一行,设置了justify-content: space-between;但并不生效,原因是要在上一层.center 设置 flex:1;( 重点)

经常忘记,特在此记录一下,以下是代码

<view class="index-card" @click="showDetail(item)">
					<view class="card-top">
						<u-avatar size="50" :src="this.$utils.baseUrl+'/file/download/'+item.avatar"></u-avatar>
						<view class="center">
							<view><u--text size="30rpx" :lines="2" :text="item.name"></u--text></view>
							<view class="card-bottom">
								<view class="location">
									<uni-icons type="location" size="15"></uni-icons>
									<view class="address">{{item.city}} · {{item.address}}</view>
								</view>
								<view class="time">
									{{item.createTime}}
								</view>
							</view>
						</view>
					</view>
					<view class="uni-list--border-bottom"></view>
				</view>

.index-card {
		padding: 15px 15px;
		background-color: #ffffff;
		margin-top: 5px;
	
		.card-top {
			color: $uni-color-title;
			display: flex;
			flex-direction: row;
			align-items: center;
	
			.center {
				font-size: $font-lg;
				margin-left: 10px;
				flex:1;
				
				.card-bottom {
					color: $font-color-light;
					font-size: 26rpx;
					margin-top: 10px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					
					.location {
						display: flex;
						flex-direction: row;
						align-items: center;
						.address {
							width: 400rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
					.time {
						color: $color-primary;
					}
				}
			}
		}
	
		
	}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1080980.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深度学习基础知识 BatchNorm、LayerNorm、GroupNorm的用法解析

深度学习基础知识 BatchNorm、LayerNorm、GroupNorm的用法解析 1、BatchNorm2、LayerNorm3、GroupNorm用法&#xff1a; BatchNorm、LayerNorm 和 GroupNorm 都是深度学习中常用的归一化方式。 它们通过将输入归一化到均值为 0 和方差为 1 的分布中&#xff0c;来防止梯度消失和…

学生用的台灯哪种比较好?分享专家推荐的学生台灯

对于学生来说&#xff0c;台灯是必不可少的一盏学习照明灯具&#xff0c;它能提供室内不足的光线、亮度&#xff0c;基本每个学生在宿舍、家里都会备着一台。不过台灯也并不是随便挑选一台使用就可以的&#xff0c;很多学生就是因为使用了一些价格低廉、质量安全没有保障的台灯…

【大数据】hadoop安装部署(学习笔记)

一、集群组成概述 Hadoop集群包括两个集群&#xff1a;HDFS集群、YARN集群 两个集群逻辑上分离、通常物理上在一起 两个集群都是标准的主从架构集群 HDFS集群&#xff08;分布式存储&#xff09;&#xff1a; 主角色&#xff1a;NameNode从角色&#xff1a;DataNode主角色…

代码随想录算法训练营第五十八天 |583. 两个字符串的删除操作、72. 编辑距离、编辑距离总结篇

一、583. 两个字符串的删除操作 题目链接/文章讲解/视频讲解&#xff1a;代码随想录 思考&#xff1a; 1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j]&#xff1a;以i-1为结尾的字符串word1&#xff0c;和以j-1位结尾的字符串word2&#xff0c;想要达…

postman 密码rsa加密登录-2加密密码

上一篇讲了获取公钥&#xff0c;将环境准备好之后&#xff0c;在登录接口的Pre-request Scrip 里&#xff0c;使用公钥进行加密后在正常登录。本文采用的方案是使用第三方模块forge.js来实现加密。 1、环境准备好&#xff0c;系统git 和node都OK。下载forge.js git clone htt…

Java-Atomic原子操作类详解及源码分析,Java原子操作类进阶,LongAdder源码分析

文章目录 一、Java原子操作类概述1、什么是原子操作类2、为什么要用原子操作类3、CAS入门 二、基本类型原子类1、概述2、代码实例 三、数组类型原子类1、概述2、代码实例 四、引用类型原子类1、概述2、AtomicReference3、ABA问题与AtomicStampedReference4、一次性修改&#xf…

SpringBoot (1)

目录 1 入门案例 1.1 环境准备 1.2 编写pom.xml 1.3 编写入口程序 1.4 编写接口 1.5 编写配置 1.6 快速部署 1.6.1 打jar包 1.6.2 部署 1.7 访问接口 2 全注解开发 2.1 常用注解 2.2 属性绑定注解 2.2.1 注册组件 2.2.2 ConfigurationProperties(prefix"te…

AlphaPose Pytorch 代码详解(一):predict

前言 代码地址&#xff1a;AlphaPose-Pytorch版 本文以图像 1.jpg&#xff08;854x480&#xff09;为例对整个预测过程的各个细节进行解读并记录 python demo.py --indir examples/demo --outdir examples/res --save_img1. YOLO 1.1 图像预处理 cv2读取BGR图像 img [480,…

哈希的应用--位图和布隆过滤器

哈希的应用--位图和布隆过滤器 位图1. 位图概念2. 位图在实际中的应用3. 位图相似应用给定100亿个整数&#xff0c;如何找到只出现一次的整数&#xff1f;1个文件100亿int&#xff0c;1G内存&#xff0c;如何找到不超过2次的所有整数 布隆过滤器1. 布隆过滤器的提出2. 布隆过滤…

HarmonyOS学习 -- ArkTS开发语言入门

文章目录 一、编程语言介绍二、TypeScript基础类型1. 布尔值2. 数字3. 字符串4. 数组5. 元组6. 枚举7. unknown8. void9. null 和 undefined10. 联合类型 三、TypeScript基础知识条件语句if语句switch语句 函数定义有名函数和匿名函数可选参数剩余参数箭头函数 类1. 类的定义2.…

华为认证 | 这门HCIA认证正式发布!

华为认证云计算工程师HCIA-Cloud Computing V5.5&#xff08;中文版&#xff09;自2023年9月28日起&#xff0c;正式在中国区发布。 01 发布概述 基于“平台生态”战略&#xff0c;围绕“云-管-端”协同的新ICT技术架构&#xff0c;华为公司打造了覆盖ICT领域的认证体系&#…

机器人制作开源方案 | 齿轮传动轴偏心轮摇杆简易四足

1. 功能描述 齿轮传动轴偏心轮摇杆简易四足机器人是一种基于齿轮传动和偏心轮摇杆原理的简易四足机器人。它的设计原理通常如下&#xff1a; ① 齿轮传动&#xff1a;通过不同大小的齿轮传动&#xff0c;实现机器人四条腿的运动。通常采用轮式齿轮传动或者行星齿轮传动&#xf…

git多分支、git远程仓库、ssh方式连接远程仓库、协同开发(避免冲突)、解决协同冲突(多人在同一分支开发、 合并分支)

1 git多分支 2 git远程仓库 2.1 普通开发者&#xff0c;使用流程 3 ssh方式连接远程仓库 4 协同开发 4.1 避免冲突 4.2 协同开发 5 解决协同冲突 5.1 多人在同一分支开发 5.2 合并分支 1 git多分支 ## 命令操作分支-1 创建分支git branch dev-2 查看分支git branch-3 分…

bash一行输入,多行回显demo脚本

效果图&#xff1a; 脚本&#xff1a; #!/bin/bash # 定义一个变量&#xff0c;用来存储输入的内容 input"" # 定义一个变量&#xff0c;用来存储输入的字符 char""# 为了让read能读到空格键 IFS_store$IFS IFS# 提示内容&#xff0c;在while循环中也有&a…

SMOS数据处理,投影变换,‘EPSG:6933‘转为‘EPSG:4326‘

在处理SMOS数据时&#xff0c;遇到了读取nc数据并存为tif后&#xff0c;影像投影无法改变&#xff0c;因此全球数据无法重叠。源数据的投影为EPSG:6933&#xff0c;希望转为EPSG:4326。 解决代码。 python import os import netCDF4 as nc import numpy as np from osgeo impo…

阿里云ModelScope 是一个“模型即服务”(MaaS)平台

简介 项目地址&#xff1a;https://github.com/modelscope/modelscope/tree/master ModelScope 是一个“模型即服务”(MaaS)平台&#xff0c;旨在汇集来自AI社区的最先进的机器学习模型&#xff0c;并简化在实际应用中使用AI模型的流程。ModelScope库使开发人员能够通过丰富的…

sap 一次性供应商 供应商账户组 临时供应商 <转载>

原文链接&#xff1a;https://blog.csdn.net/xianshengsun/article/details/132620593 sap中有一次性供应商这个名词&#xff0c;一次性供应商和非一次性供应商又有什么区别呢&#xff1f; 有如何区分一次性供应商和非一次性供应商呢&#xff1f; 1 区分一次性供应商和非一次性…

狄拉克函数及其性质

狄拉克函数及其性质 狄拉克函数 近似处理 逼近近似 积分近似 狄拉克函数的性质 狄拉克函数的Hermite展开

【C++】【自用】STL六大组件:算法

文章目录 &#x1f53a;sortstable_sort&#x1f53a;reverse&#x1f53a;swap&#x1f53a;find&#x1f53a;max/min&#x1f53a;next_permutation/prev_permutation 全排列binary_searchlower_bound/upper_bound 求下界和上界set_union/set_intersection/set_difference 求…

结构体课程自我理解

目录 1. 结构体类型的声明 1.2特殊的声明方法 1.3结构体的自引用 1.4 typedef 对结构体命名 2. 结构体变量的创建和初始化 3. 结构成员访问操作符 4. 结构体内存对⻬ 4.1下面给大伙4个练习题&#xff0c;有自我解析 4.2为什么存在内存对齐 4.3修改默认对齐数 5. …