解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start)

news2024/10/6 6:40:28

案例:

<view class="abc">
	<view class="abc-item" v-for="(item,index) in 8" :key="index">
		看我
	</view>
</view>
<style lang="less">
	.abc{
		height: 100px;
		display: flex;
		flex-wrap: wrap;
		overflow-y: scroll;
		&-item{
			padding: 0 20rpx;
			margin-right: 10rpx;
		}
	}
</style>

效果
在这里插入图片描述
当循环的item大于足够多的时候(垂直的高度大于父元素的高造成可以滑动的情况下)
在这里插入图片描述
情况就很正常。
但是要在item少的情况下也要是这样的效果。
这个时候就需要用到align-content: flex-start;
在这里插入图片描述

对于vue也是一样的解决办法。

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

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

相关文章

OD(8)之Mermaid流程图(flowcharts)使用详解

OD(8)之Mermaid流程图(flowcharts)使用详解 Author: Once Day Date: 2024年2月20日 漫漫长路才刚刚开始… 全系列文章可参考专栏: Linux实践记录_Once_day的博客-CSDN博客 参考文章: 关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charting tool‍…

数据结构—图

图是在数据结构中难度比较大&#xff0c;并且比较抽象一种数据结构。 图在地图&#xff0c;社交网络这方面有应用。 图的基本概念 图是由顶点集合及顶点间的关系组成的一种数据结构&#xff1a;G&#xff08;V&#xff0c;E&#xff09;。图标的英文&#xff1a;graph。 (x,…

Rust Vs Go:从头构建一个web服务

Go 和 Rust 之间的许多比较都强调它们在语法和初始学习曲线上的差异。然而&#xff0c;最终的决定性因素是重要项目的易用性。 “Rust 与 Go”争论 Rust vs Go 是一个不断出现的话题&#xff0c;并且已经有很多关于它的文章。部分原因是开发人员正在寻找信息来帮助他们决定下…

数据分析在企业培训系统中的关键作用与优势

数据分析在企业培训系统中扮演着关键的角色&#xff0c;它不仅能够帮助企业更好地了解员工培训的需求和效果&#xff0c;还能够提供有针对性的教育方案和提高培训效果。 数据分析可以帮助企业准确把握员工培训需求。通过收集和分析员工的培训需求调查和反馈信息&#xff0c;企…

浅谈WPF之利用RichTextBox实现富文本编辑器

在实际应用中&#xff0c;富文本随处可见&#xff0c;如留言板&#xff0c;聊天软件&#xff0c;文档编辑&#xff0c;特定格式内容等&#xff0c;在WPF开发中&#xff0c;如何实现富文本编辑呢&#xff1f;本文以一个简单的小例子&#xff0c;简述如何通过RichTextBox实现富文…

JavaCV之rtmp推流(FLV和M3U8)

JavaCV与FFmpeg FFmpeg是一款开源的多媒体处理工具集&#xff0c;它包含了一系列用于处理音频、视频、字幕等多媒体数据的库和工具。 JavaCV集成了FFmpeg库&#xff0c;使得Java开发者可以使用FFmpeg的功能&#xff0c;比如视频解码、编码、格式转换等。 除了FFmpeg&#xff…

01_02_mysql07_mysql8.0新特性

1.MySQL8新特性概述 MySQL从5.7版本直接跳跃发布了8.0版本 &#xff0c;可见这是一个令人兴奋的里程碑版本。MySQL 8版本在功能上做了显著的改进与增强&#xff0c;开发者对MySQL的源代码进行了重构&#xff0c;最突出的一点是多MySQL Optimizer优化器进行了改进。不仅在速度上…

在VsCode中通过Cookie登录LeetCode

在vscode中配置好leetcode之后&#xff0c;一般最常用的就是通过cookie登录leetcode ; 首先点击sign in &#xff0c; 然后选择最下面的 &#xff0c; LeetCode Cookie ! 然后输入username(也就是你的lc用户名) 或者 你leetcode绑定的邮箱 ; 输入完成之后 ; 就是要你输入你的l…

【Java EE初阶二十二】https的简单理解

1. 初识https 当前网络上,主要都是 HTTPS 了,很少能见到 HTTP.实际上 HTTPS 也是基于 HTTP.只不过 HTTPS 在 HTTP 的基础之上, 引入了"加密"机制&#xff1b;引入 HTTPS 防止你的数据被黑客篡改 &#xff1b; HTTPS 就是一个重要的保护措施.之所以能够安全, 最关键的…

C#知识点-14(索引器、foreach的循环原理、泛型、委托)

索引器 概念&#xff1a;索引器能够让我们的对象&#xff0c;以索引&#xff08;下标&#xff09;的形式&#xff0c;便捷地访问类中的集合&#xff08;数组、泛型集合、键值对&#xff09; 应用场景&#xff1a; 1、能够便捷地访问类中的集合 2、索引的数据类型、个数、顺序不…

从源码解析Kruise(K8S)原地升级原理

从源码解析Kruise原地升级原理 本文从源码的角度分析 Kruise 原地升级相关功能的实现。 本篇Kruise版本为v1.5.2。 Kruise项目地址: https://github.com/openkruise/kruise 更多云原生、K8S相关文章请点击【专栏】查看&#xff01; 原地升级的概念 当我们使用deployment等Wor…

vue:find查找函数实际开发的使用

find的作用&#xff1a; find 方法主要是查找数组中的属性&#xff0c;会遍历数组&#xff0c;对每一个元素执行提供的函数&#xff0c;直到找到使该函数返回 true 的元素。然后返回该元素的值。如果没有元素满足测试函数&#xff0c;则返回 undefined。 基础使用&#xff1a…

摄像头相机标定

相机标定 相机标定的目的有两个。 第一&#xff0c;要还原摄像头成像的物体在真实世界的位置就需要知道世界中的物体到计算机图像平面是如何变换的&#xff0c;相机标定的目的之一就是为了搞清楚这种变换关系&#xff0c;求解内外参数矩阵。 第二&#xff0c;摄像机的透视投影有…

linux下开发,stm32和arduino,我该何去何从?

linux下开发&#xff0c;stm32和arduino&#xff0c;我该何去何从&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「stm3的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共…

zemax消畸变目镜

用三胶合透镜代替了RKE的消色差双胶合镜&#xff0c;减少了横向色差和畸变 入瞳直径4mm波长0.51、0.56、0.61半视场22.5焦距28mm 镜头参数&#xff1a; 成像效果&#xff1a; 畸变效果&#xff1a; 点列图&#xff1a;

S281 LoRa网关助力智慧城市建设的智能交通管理

S281 LoRa网关作为智慧城市建设中的重要组成部分&#xff0c;发挥着关键的作用&#xff0c;特别是在智能交通管理方面。通过连接各类传感器设备和物联网终端&#xff0c;S281 LoRa网关实现了对城市交通系统的远程监控、智能调度和信息化管理&#xff0c;为城市交通管理部门提供…

UE5 摄像机晃动

1.新建camerashake蓝图类 命名为 晃动 2.调节相关参数 3.打开关卡序列 给摄像机添加 晃动 动画 4.播放

#gStore-weekly | workbench功能详解之知识更新

gStore workbench作为gStore的可视化管理工具&#xff0c;不仅提供了可视化查询功能&#xff0c;还提供了可视化的知识更新功能&#xff0c;用户可以在可视化界面上进行知识的新增、修改和删除等操作&#xff0c;让我们的知识管理更加清晰和便捷。 1.查询知识 登录workbenc…

新年伊始,VR全景释放“强信号”,可以结合哪些行业?

一年之计在于春&#xff0c;各行各业都想抢占在经济的第一线&#xff0c;那么如何抓住新一轮科技革命和产业变革新机遇呢&#xff1f;VR全景释放了“强信号”。对于大部分实体行业来说&#xff0c;都会有VR全景的制作需求&#xff0c;租房买房的&#xff0c;可能都见识过线上VR…

Manacher算法和扩展kmp

Manacher算法 a情况 b情况 具体例子 c情况 总结 代码 #include<iostream> #include<algorithm> #include<string> #include<cmath>using namespace std; const int N 1.1e7 1; char ss[N << 1]; int p[N << 1]; int n; void manacherss…