使用flex布局实现一行固定展示n个元素

前言:

最近在公司中完成小程序的UI设计稿时,遇到了布局一个问题:UI设计稿想实现的布局是这样的:

笔者第一反应就是使用flex中的justify-content: space-between;属性,但是使用之后发现,justify-content: space-between;这个属性会以行为单位进行布局,就变成了这种布局:

经过笔者的研究,最后发现使用flex布局加百分比布局就可以自由排放每一行的盒子,整理代码如下:

HTML代码:

 <body><div class="container"><div class="content"><imgsrc="你的图片地址"alt=""/><span>title1</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title2</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title3</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title4</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title5</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title6</span></div><div class="content"><imgsrc="你的图片地址"alt=""/><span>title7</span></div></div></body>

CSS代码:

.container {width: 100%;padding: 20px 0px;height: 392rpx;/* 使用flex布局并允许换行 */display: flex;flex-wrap: wrap;background: #f2f8da;
}
.content {/* 给单个盒子设宽度,使用百分比,25%就是一行最多放4个盒子 */width: 25%;height: 50px;margin-bottom: 48px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 24rpx;font-weight: normal;line-height: 24rpx;color: #323640;
}
img {width: 30px;height: 30px;margin-bottom: 6px;
}

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

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

相关文章

Angular v19 (三):增量水合特性详解 - 什么是水合过程?有哪些应用场景?与 Qwik 相比谁更胜一筹?- 哪个技术好我就学哪个,这就是吸心大法吧

Angular在其最新版本 v19 中引入了增量水合&#xff08;Incremental Hydration&#xff09;这一特性。这一更新引发了开发者们广泛的讨论&#xff0c;特别是在优化首屏加载速度和改善用户体验方面。本文将详解水合过程的概念、增量水合的应用场景&#xff0c;以及它与类似框架如…

各类 AI API获取方法,GPT | Claude | Midjourney等

前言 在当今数字化转型的浪潮中&#xff0c;企业和开发者都面临着前所未有的技术挑战与机遇。随着ChatGPT等大语言模型的崛起&#xff0c;AI应用开发已从可选项变成了必选项。在AI应用开发中&#xff0c;成本控制是一个普遍的痛点。单是API调用费用就包含了多个维度&#xff1…

Linux:进程间通信之system V

一、共享内存 进程间通信的本质是让不同的进程看到同一份代码。 1.1 原理 第一步&#xff1a;申请公共内存 为了让不同的进程看到同一份资源&#xff0c;首先我们需要由操作系统为我们提供一个公共的内存块。 第二步&#xff1a;挂接到要通信进程的地址空间中 &#xff…

Python数组拆分(array_split())

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

微信小程序——文档下载功能分享(含代码)

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

LabVIEW氢气纯化控制系统

基于LabVIEW的氢气纯化控制系统满足氢气纯化过程中对精确控制的需求&#xff0c;具备参数设置、过程监控、数据记录和报警功能&#xff0c;体现了LabVIEW在复杂工业控制系统中的应用效能。 项目背景 在众多行业中&#xff0c;尤其是石油化工和航天航空领域&#xff0c;氢气作为…

【linux】(23)对象存储服务-MinIo

MinIO 是一个高性能的对象存储服务&#xff0c;兼容 Amazon S3 API。 Docker安装MinIo 前提条件 确保您的系统已经安装了 Docker。如果还没有安装 Docker&#xff0c;可以参考 Docker 官方文档进行安装。 1. 拉取 MinIO Docker 镜像 首先&#xff0c;从 Docker Hub 拉取 Mi…

(超详细图文)PLSQL Developer 配置连接远程 Oracle 服务

1、下载配置文件 &#xff08;超详细图文详情&#xff09;Navicat 配置连接 Oracle-CSDN博客 将下载的文件解压到单独文件夹&#xff0c;如&#xff1a;D:\App\App_Java\Oracle\instantclient-basic-windows.x64-19.25.0.0.0dbru 2、配置 打开 PLSQL Developer&#xff0c;登…

【网络篇】HTTP知识

键入网址到网页显示&#xff0c;期间发生了什么&#xff1f; 浏览器第一步是解析URL&#xff0c;这样就得到了服务器名称和文件的路径名&#xff0c;然后根据这些信息生成http请求&#xff0c;通过DNS查询得到我们要请求的服务器地址&#xff0c;然后添加TCP头、IP头以及MAC头&…

C 语言学习的经典书籍有哪些?

学习C语言的理由 C语言是一种程席设计语言&#xff0c;它是由美国AT&T公司贝尔实验室的Dennis Ritchie于1972年发明的。C语言之所以流行&#xff0c;是因为它简单易用。学习C语言的几个理由如下&#xff1a; (1)C、C#和Java使用一种被称为面向对象程序设计(0bject-Orient…

webrtc ios h264 硬编解码

webrtc ios h264 硬编解码 一 ios 系统支持 从ios8开始&#xff0c;苹果公司开放了硬解码和硬编码API&#xff08;即 VideoToolbox.framework API&#xff09; 二 主要api 1 主要解码函数 VTDecompressionSessionCreate // 创建解码 session VTDecompressionSession…

RVO动态避障技术方案介绍

原文&#xff1a;RVO动态避障技术方案介绍 - 哔哩哔哩 我们在开发游戏的时候经常会遇到这样的问题&#xff0c;当我们寻路的时候&#xff0c;其它人也在寻路&#xff0c;如何避免不从其它人的位置穿过。这个叫做动态避障&#xff0c;目前主流的解决方案就是RVO。本节我们来介绍…

(免费送源码)计算机毕业设计原创定制:Java+ssm+JSP+Ajax SSM棕榈校园论坛的开发

摘要 随着计算机科学技术的高速发展,计算机成了人们日常生活的必需品&#xff0c;从而也带动了一系列与此相关产业&#xff0c;是人们的生活发生了翻天覆地的变化&#xff0c;而网络化的出现也在改变着人们传统的生活方式&#xff0c;包括工作&#xff0c;学习&#xff0c;社交…

对比学习与自监督任务

对比学习与自监督任务 笔者在之前上课时候被迫接受学习了NLP的许多相关的知识&#xff0c;BERT GPT等许多的NLP领域的大模型&#xff0c;都采用了半监督或者说是无监督的训练方法&#xff0c;最近在视觉的领域视觉自监督的模型受到了越来越多的关注。现在需要自己了解一下自监督…

SpringCloud2~~~

Nacos Nacos就是替代 注册中心【Eureka】 和 配置中心【Config】 支持AP和CP&#xff0c;可以切换 了解即可 下载和运行 下载版本&#xff08;找自己想要的版本&#xff09;&#xff1a;Tags alibaba/nacos GitHub 本地有良好的 Java8 Maven环境 解压安装包&#xff0c;直接…

Vue进阶之单组件开发与组件通信

书接上篇&#xff0c;我们了解了如何快速创建一个脚手架&#xff0c;现在我们来学习如何基于vite创建属于自己的脚手架。在创建一个新的组件时&#xff0c;要在新建文件夹中打开终端创建一个基本的脚手架&#xff0c;可在脚手架中原有的文件中修改或在相应路径重新创建&#xf…

VPS默认是通过密钥文件登陆机器,编译~让机器能直接通过root密码登陆。

SSH 登录机器 登陆机器 输入命令切换到root权限并修改密码&#xff1a; sudu su #切换root权限psddwd #修改密码 修改登陆方式 输入命令&#xff1a; vi /root/.ssh/authorized_keys 找到 “ssh-rsa”字样&#xff0c; 按键盘 ” i ” 进入编辑模式&#xf…

map用于leetcode

//第一种map方法 function groupAnagrams(strs) {let map new Map()for (let str of strs) {let key str ? : str.split().sort().join()if (!map.has(key)) {map.set(key, [])}map.get(key).push(str)} //此时map为Map(3) {aet > [ eat, tea, ate ],ant > [ tan,…

文件比较和文件流

文件比较和文件流 一、文本比较工具 diff1.基本用法1.1输出格式 2.常用选项 二、文件流1.文件的打开模式2.文件流的分类ifstreamofstreamfstrem区别 3.文件流的函数1. 构造函数2. is_open 用于判断文件是否打开3. open4. getline5. close6. get()7. read8. write9. put10. gcou…

《如何使用Unity的Avatar人偶以及启动重定向-实现2个或多个人物模型使用同一个动画片段》

8.5 使用Avatar和人物重定向 注意事项&#xff1a; 这个人偶以及重定向技术只能作用于人物模型&#xff01; 这个人偶以及重定向技术只能作用于人物模型&#xff01; 这个人偶以及重定向技术只能作用于人物模型&#xff01; 1. 基本原理 在Unity中&#xff0c;Avatar人偶和…