css flex 布局换行

默认使用display: flex;是不换行的,只需要加上flex-wrap: wrap;就行了,效果图

.app-center {display: flex;flex-wrap: wrap;justify-content:flex-start;
}

通过上面我们发现虽然时间换行了,但是每行的边距不一样

加上这个就行了:flex: 1 0 calc(20% - 40px); /* 控制一行显示5个,设置间距为20px */,最后效果

整体代码

<van-nav-bar title="应用中心" fixed="false" placeholder="false" custom-class="nav" title-class="nav-title"><!-- <view slot="left" class="leftIcon"><van-icon name="arrow-left" color="white" size="15px" /></view> -->
</van-nav-bar>
<scroll-view class="scrollarea" show-scrollbar="{{false}}" enhanced="{{true}}" enable-passive="{{true}}" scroll-y="{{true}}"><view class="container"><view class="app-module"><text class="module-title">应付</text><view class="app-center"><view class="app-item"><!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> --><van-icon name="setting-o" size="30px" /><text class="app-title">发起</text></view><view class="app-item"><!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> --><van-icon name="setting-o" size="30px" /><text class="app-title">发起</text></view><view class="app-item"><!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> --><van-icon name="setting-o" size="30px" /><text class="app-title">发起</text></view><view class="app-item"><!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> --><van-icon name="setting-o" size="30px" /><text class="app-title">发起</text></view><view class="app-item"><!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> --><van-icon name="setting-o" size="30px" /><text class="app-title">发起</text></view><view class="app-item"><!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> --><van-icon name="setting-o" size="30px" /><text class="app-title">发起</text></view><view class="app-item"><!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> --><van-icon name="setting-o" size="30px" /><text class="app-title">发起</text></view><view class="app-item"><!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> --><van-icon name="setting-o" size="30px" /><text class="app-title">发起</text></view><view class="app-item"><!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> --><van-icon name="setting-o" size="30px" /><text class="app-title">发起</text></view><view class="app-item"><!-- <image class="app-icon" src="{{subItem.iconUrl}}"></image> --><van-icon name="setting-o" size="30px" /><text class="app-title">发起</text></view></view></view></view>
</scroll-view>
.app-module{background-color: #FFFFFF;height: auto;border-radius: 5px;padding: 10px 10px 0px 10px;
}.app-center {display: flex;flex-wrap: wrap;justify-content:flex-start;
}.app-module .module-title {font-weight: bold;
}.app-item {flex: 1 0 calc(20% - 40px); /* 控制一行显示5个,设置间距为20px */display: flex;flex-direction: column;align-items: center;margin: 20rpx;padding: 5px;
}.app-icon {width: 80rpx;height: 80rpx;
}.app-title {margin-top: 10rpx;font-size: 14px;
}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序-分包

分包 1.什么是分包 分包指的是把一个完整的小程序项目&#xff0c;按照需求划分为不同的子包&#xff0c;在构建时打包成不同的分包&#xff0c;用户在使用时按需进行加载。 2.分包的好处 对小程序进行分包的好处主要有以下两点&#xff1a; 可以优化小程序首次启动的下载时间…

二维码图案样式怎么改?二维码改样式的简单方法

怎么修改二维码图案的样式呢&#xff1f;一般情况下生成的二维码图案大多是黑白的普通样式&#xff0c;那么很多人会为了提高展现效果或者增加辨识度&#xff0c;需要修改二维码的图案样式、添加logo、文字等其他内容&#xff0c;那么面对这样的需求该如何解决呢&#xff1f;下…

docker学习(十四)docker搭建私服

docker私服搭建&#xff0c;配置域名访问&#xff0c;设置访问密码 启动registry docker run -d \-p 5000:5000 \-v /opt/data/registry:/var/lib/registry \registrydocker pull hello-world docker tag hello-world 127.0.0.1:5000/hello-world docker push 127.0.0.1:5000…

SQL中如何添加数据

SQL中如何添加数据 一、SQL中如何添加数据&#xff08;方法汇总&#xff09;二、SQL中如何添加数据&#xff08;方法详细解说&#xff09;1. 使用SQL脚本&#xff08;推荐&#xff09;1.1 在表中插入1.1.1 **第一种形式**1.1.2 **第二种形式**SQL INSERT INTO 语法示例SQL INSE…

Keepalived+LVS构建高可用集群

目录 一、Keepalive基础介绍 1. Keepalive与VRRP 2. VRRP相关技术 3. 工作原理 4. 模块 5. 架构 6. 安装 7. Keepalived 相关文件 7.1 配置组成 7.2 全局配置 7.3 VRRP实例配置&#xff08;lvs调度器&#xff09; 7.4 虚拟服务器与真实服务器配置 二、Keepalived…

IDEA管理Git + Gitee 常用操作

文章目录 IDEA管理Git Gitee 常用操作1.Gitee创建代码仓库1.创建仓库1.点击新建仓库2.完成仓库信息填写3.创建成功4.管理菜单可以修改这个项目的设置 2.设置SSH公钥免密登录基本介绍1.找到.ssh目录2.执行指令 ssh-keygen3.将公钥信息添加到码云账户1.点击设置2.ssh公钥3.复制.…

软件开发服务合同套用模板

一、合作方式 二、合同标的 三、开发进度及软件成果交付 四、开发费用 五、付款结算方式 六、知识产权条款 七、双方的权利和义务 八、验收 九、售后服务支持 十、培训 十一、保密责任 十二、不可抗力 十三、争议的解决 十四、其它事项 软件开发全套资料获取下载…

python之海龟绘图

海龟绘图&#xff08;turtle&#xff09;是一个Python内置的绘图库&#xff0c;也被称为“Turtle Graphics”或简称“Turtles”。它采用了一种有趣的绘图方式&#xff0c;模拟一只小海龟在屏幕上爬行&#xff0c;而小海龟爬行的路径就形成了绘制的图形。这种绘图方式最初源自20…

elasticsearch篇:RestClient操作

1. RestClient ES官方提供了各种不同语言的客户端&#xff0c;用来操作ES。这些客户端的本质就是组装DSL语句&#xff0c;通过http请求发送给ES。官方文档地址&#xff1a;Elasticsearch Clients | Elastic 其中的Java Rest Client又包括两种&#xff1a; Java Low Level Res…

Microsoft SQL Server 编写汉字转拼音函数

目录 应用场景 举例 函数实现 小结 应用场景 在搜索应用中&#xff0c;我们一般会提供一个搜索框&#xff0c;输入关健字&#xff0c;点击查询按钮以获取结果数据。大部分情况我们会提供模糊查询的形式以在一个或多个字段进行搜索以获取结果。这样可以简化用户的操作&…

jvm八股

文章目录 运行时数据区域Java堆对象创建对象的内存布局对象的访问定位句柄直接指针 GC判断对象是否已死引用计数算法可达性分析算法 引用的类别垃圾收集算法分代收集理论标记清除算法标记复制算法标记整理算法 实现细节并发的可达性分析 垃圾收集器serial收集器ParNew收集器Par…

【PyTorch实战演练】深入剖析MTCNN(多任务级联卷积神经网络)并使用30行代码实现人脸识别

文章目录 0. 前言1. 级联神经网络介绍2. MTCNN介绍2.1 MTCNN提出背景2.2 MTCNN结构 3. MTCNN PyTorch实战3.1 facenet_pytorch库中的MTCNN3.2 识别图像数据3.3 人脸识别3.4 关键点定位 0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我自己学习的理解&#xff…

【小黑送书—第十二期】>>一本书讲透Elasticsearch:原理、进阶与工程实践(文末送书)

Elasticsearch 是一种强大的搜索和分析引擎&#xff0c;被广泛用于各种应用中&#xff0c;以其强大的全文搜索能力而著称。 不过&#xff0c;在日常管理 Elasticsearch 时&#xff0c;我们经常需要对索引进行保护&#xff0c;以防止数据被意外修改或删除&#xff0c;特别是在进…

【Mining Data】收集数据(使用 Python 挖掘 Twitter 数据)

@[TOC](【Mining Data】收集数据(使用 Python 挖掘 Twitter 数据)) 具体步骤 第一步是注册您的应用程序。特别是,您需要将浏览器指向 http://apps.twitter.com,登录 Twitter(如果您尚未登录)并注册新应用程序。您现在可以为您的应用程序选择名称和描述(例如“Mining Demo”…

3.6研究代码(2)

指的是微电网运行参数。 在MATLAB中&#xff0c;randi([0,1],1,48) 会生成一个包含1*48个0或1的随机整数数组。这意味着数组中的每个元素都将是0或1。 MATLAB帮助中心&#xff1a;均匀分布的伪随机整数 - MATLAB randi - MathWorks 中国https://ww2.mathworks.cn/help/matlab/r…

java SSM流浪宠物救助与领养myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM流浪宠物救助与领养管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系…

【自然语言处理】NLP入门(五):1、正则表达式与Python中的实现(5):字符串常用方法:对齐方式、大小写转换详解

文章目录 一、前言二、正则表达式与Python中的实现1.字符串构造2. 字符串截取3. 字符串格式化输出4.字符转义符5. 字符串常用函数函数与方法之比较 6. 字符串常用方法1. 对齐方式center()ljust()rjust() 2. 大小写转换lower()upper()capitalize()title()swapcase() 一、前言 本…

深入浅出计算机网络 day.1 概论② 因特网概述

当你回头看的时候&#xff0c;你会发现自己走了一段&#xff0c;自己都没想到的路 —— 24.3.9 内容概述 01.网络、互连&#xff08;联&#xff09;网与因特网的区别与联系 02.因特网简介 一、网络、互连&#xff08;联&#xff09;网与因特网的区别与联系 1.若干节点和链路互连…

[Java安全入门]三.URLDNS链

一.前言 在初步学习java的序列化和反序列化之后&#xff0c;这里学习java反序列化漏洞的一个利用链&#xff0c;也是比较基础的一条链。 由于URLDNS不需要依赖第三方的包&#xff0c;同时不限制jdk的版本&#xff0c;所以通常用于检测反序列化的点。 二.代码展开分析 构造链 …

STM32day2

1.思维导图 个人暂时的学后感&#xff0c;不一定对&#xff0c;没什么东西&#xff0c;为做项目奔波中。。。1.使用ADC采样光敏电阻数值&#xff0c;如何根据这个数值调节LED灯亮度。 while (1){/* USER CODE END WHILE *//* USER CODE BEGIN 3 */adc_val HAL_ADC_GetValue(&a…