如何解决弹性布局flex-wrap换行之后不想要最后一行自动分配剩余空间,让元素从左往右开始排列?

本文主要是介绍如何解决弹性布局flex-wrap换行之后不想要最后一行自动分配剩余空间,让元素从左往右开始排列?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这个问题的表述其实就反应了我们对弹性布局某些属性的理解不充分,混用,乱用。哈哈,没关系,我就是要问这样错误的问题,因为太多人跟我一样会问这样错误的问题。
那么现在我们来解决吧。

错误效果展示:
使用不当
这是相应css代码:

.topicWrap {width: 100%;overflow: hidden;display: flex;justify-content: space-between;flex-wrap: wrap;
}
.topicItem {width: 4.375rem;height: 1.875rem;text-align: center;line-height: 1.875rem;background: rgba(255, 255, 255, 1);border: 1px solid rgba(32, 119, 184, 1);border-radius: 15px;font-size: 14px;color: rgba(32, 119, 184, 1);margin: 0.3125rem 0.625rem;
}

我想要的效果是这样的:
在这里插入图片描述

.topicWrap {width: 100%;overflow: hidden;display: flex;/* justify-content: space-between; */  /* 删除子级在父级主轴上的对齐方式这一属性,直接用弹性换行就ok了 */flex-wrap: wrap;
}
.topicItem {width: 4.375rem;height: 1.875rem;text-align: center;line-height: 1.875rem;background: rgba(255, 255, 255, 1);border: 1px solid rgba(32, 119, 184, 1);border-radius: 15px;font-size: 14px;color: rgba(32, 119, 184, 1);margin: 0.3125rem 0.625rem;
}

大家看出区别了吗?
总结方法:大部分新手程序员在使用弹性布局的时候因惯性思维,display:flex;之后都会使用justify-content: space-between;配合设置子级对齐方式。这样往往会遇到要子级元素最后一排排列出现问题。所以这时就不要设置justify-content属性了,直接使用弹性换行flex-wrap:wrap,再给子元素设置margin-left,也可以达到效果想要的效果哦。当然具体问题具体考虑。在明确子元素个数的时候,直接用:nth-child(n)利用奇数偶数来选择元素单独设置一下也是?的。

心得:这是一个简单傻逼的问题,来源于没有真正研究弹性布局属性的新手问题。哎,其实研究了也不怎么样,曾经专门学习了弹性布局,但是实际开发过程中也用不到那么多属性,常用的也就那几个,多多总结问题,能够越来越顺利地开发,我觉得对于初级程序员来说就够了。

这篇关于如何解决弹性布局flex-wrap换行之后不想要最后一行自动分配剩余空间,让元素从左往右开始排列?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/220063

相关文章

SpringBoot+Docker+Graylog 如何让错误自动报警

《SpringBoot+Docker+Graylog如何让错误自动报警》SpringBoot默认使用SLF4J与Logback,支持多日志级别和配置方式,可输出到控制台、文件及远程服务器,集成ELK... 目录01 Spring Boot 默认日志框架解析02 Spring Boot 日志级别详解03 Sp

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》:本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

MySQL之InnoDB存储页的独立表空间解读

《MySQL之InnoDB存储页的独立表空间解读》:本文主要介绍MySQL之InnoDB存储页的独立表空间,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、独立表空间【1】表空间大小【2】区【3】组【4】段【5】区的类型【6】XDES Entry区结构【

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

XML重复查询一条Sql语句的解决方法

《XML重复查询一条Sql语句的解决方法》文章分析了XML重复查询与日志失效问题,指出因DTO缺少@Data注解导致日志无法格式化、空指针风险及参数穿透,进而引发性能灾难,解决方案为在Controll... 目录一、核心问题:从SQL重复执行到日志失效二、根因剖析:DTO断裂引发的级联故障三、解决方案:修复