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…

基于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. 第…

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 索引…

[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;但它们是完全独立的平台。 …

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

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

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

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

基础 | 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全维度知识…

每日一练:LeeCode-56、合并区间【数组+滑动窗口】

4.合并区间 LeeCode-56、合并区间 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 1 < intervals.le…

Math类 --Java学习笔记

Math 代表数学&#xff0c;是一个工具类&#xff0c;里面提供的都是对数据进行操作的一些静态方法 Math提供的常用方法

C语言分析基础排序算法——交换排序

目录 交换排序 冒泡排序 快速排序 Hoare版本快速排序 挖坑法快速排序 前后指针法快速排序 快速排序优化 快速排序非递归版 交换排序 冒泡排序 见C语言基础知识指针部分博客C语言指针-CSDN博客 快速排序 Hoare版本快速排序 Hoare版本快速排序的过程类似于二叉树前序…

安卓玩机工具推荐----MTK芯片读写分区 备份分区 恢复分区 制作线刷包 工具操作解析

安卓玩机工具推荐----高通芯片9008端口读写分区 备份分区 恢复分区 制作线刷包 工具操作解析 安卓玩机工具推荐----ADB状态读写分区 备份分区 恢复分区 查看分区号 工具操作解析 前面做了两期教程。分别解析了下ADB端口与高通9008端口备份分区一些基础的常识&#xff0c;那么…

【探索程序员职业赛道:挑战与机遇】

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

EMC技术:基础概念到应用的解读?|深圳比创达电子

电磁兼容性&#xff08;Electromagnetic Compatibility&#xff0c;简称EMC&#xff09;作为一项重要的技术领域&#xff0c;在现代电子设备中扮演着至关重要的角色。本文将从基础概念开始&#xff0c;逐步深入探讨EMC技术的原理、应用和意义。 一、EMC的基础概念 EMC是指电子…

ELFK 分布式日志收集系统

ELFK的组成&#xff1a; Elasticsearch: 它是一个分布式的搜索和分析引擎&#xff0c;它可以用来存储和索引大量的日志数据&#xff0c;并提供强大的搜索和分析功能。 &#xff08;java语言开发&#xff0c;&#xff09;logstash: 是一个用于日志收集&#xff0c;处理和传输的…

收割机案例-简单的动态规划

#include<iostream> using namespace std; // 创建土地 short land[32][32]; short n,m;// 实际使用的土地大小 short landA[32][32];//用A收割机收割数量记录 short landB[32][32];// 用B收割机收割数量记录 int main(){cin>>n>>m;// 存储农作物产量for(sho…