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.mzph.cn/news/736576.shtml

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

相关文章

Jupyter Notebook使用教程——从Anaconda环境构建到Markdown、LaTex语法介绍

0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我自己学习的理解&#xff0c;虽然参考了他人的宝贵见解及成果&#xff0c;但是内容可能存在不准确的地方。如果发现文中错误&#xff0c;希望批评指正&#xff0c;共同进步。 你是否在视频教程或说明文档或Githu…

软件测试面试:接口自动化测试面试题(含答案+文档)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、json和字典的区别&#xff1f; Json是轻量级的数据交互格式…

ChatGPT 基本用法!ChatGPT4的prompt的使用例子!

授人以鱼&#xff0c;不如授人以渔。这句话在AI领域尤为贴切&#xff0c;尤其是在构建与AI模型交互的prompt&#xff08;提示&#xff09;时。OpenAI在Discord官方服务器上设有一个名为prompt-library的频道&#xff0c;这里聚集了各种创意和专业的prompt&#xff0c;涵盖了从写…

Linux C 中执行shell命令

文章目录 摘要前言exec函数的使用system函数使用popen函数的使用 摘要 本文尝试使用exec,system,popen函数&#xff0c;来执行一个shell命令。(1) 如果只需要执行命令后的返回值&#xff0c;不关心标准输出&#xff0c;错误输出&#xff0c;可以使用system函数。(2) 如果希望拿…

基于java+springboot+vue实现的火车票订票系统(文末源码+Lw)294

摘要 火车票订票系统可以对火车票订票系统信息进行集中管理&#xff0c;可以真正避免传统管理的缺陷。火车票订票系统是一款运用软件开发技术设计实现的应用系统&#xff0c;在信息处理上可以达到快速的目的&#xff0c;不管是针对数据添加&#xff0c;数据维护和统计&#xf…

HAproxy反向代理与负载均衡

目录 一、HAproxy介绍 1. 概述 2. 关于4/7层负载均衡 2.1 无负载均衡 2.1.1 图示 2.1.2 说明 2.2 四层负载均衡 2.2.1 图示 2.2.2 说明 2.3 七层负载 2.3.1 图示 2.3.2 说明 3. 特性 4. HAProxy负载均衡常见策略 5. 处理模式 二、HAproxy安装 1. yum安装 2. 第…

Vue - v-if和v-else-if和v-else的使用

一、简单的演示 <body><div id"app"><p v-if"score>90">优秀</p><p v-else-if"score>60">及格</p></div><script src"../js/vue.js"></script><script>const app…

3月11日代码随想录电话号码的字母组合

17.电话号码的字母组合 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits &q…

mysql的索引、事务、分库分表问题

1.了解MySQL的索引吗&#xff1f;它为什么使用Btree作为底层&#xff0c;而不是其他呢&#xff1f; 这里我们要谈的是其他数据结构的缺点&#xff0c;然后说说Btree的优点&#xff0c;也就看你对MySQL的Btree与其他数据结构熟不熟悉。 Hash &#xff08;1&#xff09;Hash 索引…

Error running ‘Attach debug to process‘

这里写自定义目录标题 Ubuntu导入源码调试遇到错误 Ubuntu导入源码调试遇到错误 打开调试UI&#xff0c;选择system_process进程&#xff0c;直接右下角弹出错误对话框。错误如下&#xff1a; Error running ‘Attach debug to process’ Unable to find project context to …

[HackMyVM]靶场 Espo

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Un…

openAI key 与ChatGPTPlus的关系,如何升级ChatGPTPLus

一、前言 先详细介绍一下Plus会员和Open API之间的区别&#xff1a; 实际上&#xff0c;这两者是相互独立的。举例来说&#xff0c;虽然您开通了Plus会员&#xff0c;并不意味着您就可以使用4.0版本的API。尽管这两个账户可以是同一个&#xff0c;但它们是完全独立的平台。 …

小程序设备控制API能力汇总——DP相关API

ty.device.publishDps 下发 DP 功能点 需引入DeviceKit&#xff0c;且在>1.2.6版本才可使用 请求参数 Object object 属性类型默认值必填说明deviceIdstring是设备 iddpsRecord<dpId, any>是dpsmodenumber是下发通道类型 0: 局域网 1: 网络 2: 自动pipelinesArray&…

rocketmq学习笔记(一)安装部署

初次使用rocketmq&#xff0c;记录一下全流程步骤。 1、下载安装包 首先在官网&#xff0c;下载安装包&#xff0c;可也根据官方文档进行部署&#xff0c;但有一些细节没说明&#xff0c;可能会有坑&#xff0c;本文会尽量详细的描述每个步骤&#xff0c;把我踩过的坑填补上。…

后端八股笔记------Redis

Redis八股 上两种都有可能导致脏数据 所以使用两次删除缓存的技术&#xff0c;延时是因为数据库有主从问题需要更新&#xff0c;无法达到完全的强一致性&#xff0c;只能达到控制一致性。 一般放入缓存中的数据都是读多写少的数据 业务逻辑代码&#x1f447; 写锁&#x1f4…

[BT]小迪安全2023学习笔记(第20天:Web攻防-PHP特性)

第20天 和 &#xff08;等值比较&#xff09; 当使用 操作符时&#xff0c;PHP将进行宽松比较&#xff0c;也就是说&#xff0c;只比较两个值的等价性&#xff0c;而不考虑它们的类型。 如果两个值类型不同&#xff0c;PHP会尝试将它们转换成相同的类型&#xff0c;然后再进…

基础 | JVM - [指令 性能监控]

INDEX jps&#xff08;jvm 进程工具&#xff09;jinfo&#xff08;java 配置信息工具&#xff09;jstack &#xff08;查看虚拟机栈信息&#xff09;jmap&#xff08;jvm 内存影像工具&#xff09;jstat&#xff08;jvm 统计信息监控工具&#xff09;jvisualvm&#xff08;查看…

【NR 定位】3GPP NR Positioning 5G定位标准解读(十)-增强的小区ID定位

前言 3GPP NR Positioning 5G定位标准&#xff1a;3GPP TS 38.305 V18 3GPP 标准网址&#xff1a;Directory Listing /ftp/ 【NR 定位】3GPP NR Positioning 5G定位标准解读&#xff08;一&#xff09;-CSDN博客 【NR 定位】3GPP NR Positioning 5G定位标准解读&#xff08;…

对比才有伤害!ChatGPT 4.0 VS Claude 3,这就是ChatGPT偷懒变慢的根本原因!附解决方案

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

算法D38 | 动态规划1 | 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯

理论基础 无论大家之前对动态规划学到什么程度&#xff0c;一定要先看 我讲的 动态规划理论基础。 如果没做过动态规划的题目&#xff0c;看我讲的理论基础&#xff0c;会有感觉 是不是简单题想复杂了&#xff1f; 其实并没有&#xff0c;我讲的理论基础内容&#xff0c;在动…