如何解决弹性布局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

相关文章

Spring三级缓存解决循环依赖的解析过程

《Spring三级缓存解决循环依赖的解析过程》:本文主要介绍Spring三级缓存解决循环依赖的解析过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、循环依赖场景二、三级缓存定义三、解决流程(以ServiceA和ServiceB为例)四、关键机制详解五、设计约

解决tomcat启动时报Junit相关错误java.lang.ClassNotFoundException: org.junit.Test问题

《解决tomcat启动时报Junit相关错误java.lang.ClassNotFoundException:org.junit.Test问题》:本文主要介绍解决tomcat启动时报Junit相... 目录tomcat启动时报Junit相关错误Java.lang.ClassNotFoundException

解决Maven项目报错:failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.13.0的问题

《解决Maven项目报错:failedtoexecutegoalorg.apache.maven.plugins:maven-compiler-plugin:3.13.0的问题》这篇文章主要介... 目录Maven项目报错:failed to execute goal org.apache.maven.pl

Android 12解决push framework.jar无法开机的方法小结

《Android12解决pushframework.jar无法开机的方法小结》:本文主要介绍在Android12中解决pushframework.jar无法开机的方法,包括编译指令、框架层和s... 目录1. android 编译指令1.1 framework层的编译指令1.2 替换framework.ja

SQLyog中DELIMITER执行存储过程时出现前置缩进问题的解决方法

《SQLyog中DELIMITER执行存储过程时出现前置缩进问题的解决方法》在SQLyog中执行存储过程时出现的前置缩进问题,实际上反映了SQLyog对SQL语句解析的一个特殊行为,本文给大家介绍了详... 目录问题根源正确写法示例永久解决方案为什么命令行不受影响?最佳实践建议问题根源SQLyog的语句分

Java NoClassDefFoundError运行时错误分析解决

《JavaNoClassDefFoundError运行时错误分析解决》在Java开发中,NoClassDefFoundError是一种常见的运行时错误,它通常表明Java虚拟机在尝试加载一个类时未能... 目录前言一、问题分析二、报错原因三、解决思路检查类路径配置检查依赖库检查类文件调试类加载器问题四、常见

解决IDEA报错:编码GBK的不可映射字符问题

《解决IDEA报错:编码GBK的不可映射字符问题》:本文主要介绍解决IDEA报错:编码GBK的不可映射字符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录IDEA报错:编码GBK的不可映射字符终端软件问题描述原因分析解决方案方法1:将命令改为方法2:右下jav

Python实现微信自动锁定工具

《Python实现微信自动锁定工具》在数字化办公时代,微信已成为职场沟通的重要工具,但临时离开时忘记锁屏可能导致敏感信息泄露,下面我们就来看看如何使用Python打造一个微信自动锁定工具吧... 目录引言:当微信隐私遇到自动化守护效果展示核心功能全景图技术亮点深度解析1. 无操作检测引擎2. 微信路径智能获

MyBatis模糊查询报错:ParserException: not supported.pos 问题解决

《MyBatis模糊查询报错:ParserException:notsupported.pos问题解决》本文主要介绍了MyBatis模糊查询报错:ParserException:notsuppo... 目录问题描述问题根源错误SQL解析逻辑深层原因分析三种解决方案方案一:使用CONCAT函数(推荐)方案二:

IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

《IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决》:本文主要介绍IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决,本文分步骤结合实例给大... 目录步骤 1:创建 Maven Web 项目步骤 2:添加 Spring MVC 依赖1、保存后执行2、将新的依赖