解决flex布局弹性布局使用justify-content:space-between后最后一行多个元素排版问题

已于 2022-10-17 15:20:57 修改
阅读量623 收藏
点赞数
文章标签： css css3 html
于 2022-10-17 14:40:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DJxyyy/article/details/127362731
版权
本文探讨了在使用flex布局时，如何处理justify-content:space-between属性导致的最后一行元素排版异常的情况。通过添加伪类或占位元素的方法，实现了期望的布局效果。详细介绍了两种解决方案的HTML和CSS代码实现。
摘要由CSDN通过智能技术生成

解决flex布局弹性布局使用justify-content:space-between后最后一行多个元素排版问题

1、当一行有三个元素的时候直接加个伪类

原图：
请添加图片描述

想要实现的效果

请添加图片描述

html代码

<div class="floor-centerList">
<div class="item" v-for="(item,index) in servelist"
最低0.47元/天 解锁文章
何故沾衣欲湿杏花雨
关注
flex布局篇——justify-cont:center/space-between/space-around最后一行靠左
Dove言和
07-27 685
flex布局篇——justify-cont:center/space-between/space-around最后一行靠左
flex布局采用justify-content:space-between时,当为两个内容时中间被空出的解决方案
学习永无止境
06-02 2978
我们在用flex布局的时候有时会用到justify-content:space-between属性，这个属性是让弹性容器内的元素向两端对齐。 <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div>
解决flex布局space-between 最后一行不对齐的问题
柑橘乌云_
10-12 1886
方案： 对于最后一行的元素动态设置margin-right。判断如果最后一个元素处于当前列，会发生布局错乱，则设置元素的 margin-right 为剩余空间的大小（剩余列宽度+剩余间隙大小）。假设元素宽度是$width，总间隙是 $space（盒子宽度-元素宽度*列数）。适用于每一行列数固定，且列宽度固定，需要进行计算，相比较复杂。第三个元素宽度+第四个元素宽度+剩余间隙。方法一：给父级元素后面添加。
flex 布局 justify-between 最后一行左对齐
潜心
03-30 2435
网络方法层出不穷（佩服），有的追加伪类，但是追加伪类就设计到了item个数问题，就是当最后一行元素是一个的时候，不对左对齐，所以借助dom思想来实现 我要实现的是三列 利用数组长度，在末尾渲染i个伪元素，来适应justify-between的特性 ...
flex弹性盒子 justify-content: space-between； 最后一排不满的处理
joy1793的博客
05-07 3396
flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况 原图 实现效果 方案1：父级添加after伪类法，解决最后一排数量不够两端分布的情况 html <div class="tem-flex"> <div class="tem-list" v-for="item in len">列表</div> </div> js d...
Flex弹性盒布局-flex-direction、flex-wrap、justify-content、align-items
m0_64460142的博客
04-12 2335
Flex弹性盒布局 flex弹性布局：之前我们学过浮动和定位设置px值才能进行页面排版，flex会比较方便。它比较弹性。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cro
响应式flex布局，多行多列排版 ，左右与正文对齐，子元素个数不限，适合响应式图文自适应排版！
最新发布
01-08
网站建设时，用响应式布局简单方便，很多人采用display:flex布局，但遇到多行多列，同一行块之间预留间距等问题，通常做法是父容器： . box{display:flex;flex-wrap:wrap;justify-content:space-between;align-items...
移动端布局-flex布局
weixin_49455047的博客
12-06 854
一.flex布局体验 1.1传统布局与flex布局 建议： 如果是PC端页面布局，我们还是传统布局 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局 1.2初体验 1.搭建HTML结构 <body> <div> <span></span> <span></span> <span></span>.
flex：元素以弹性盒子布局的形式显示，可以通过flex-direction、justify-content等属性控制子元素的排列方式。,你说的这段话是什么意思，可以举例子吗
05-30
当一个元素的 `display` 属性设置为 `flex` 时，这个元素就成为了一个弹性容器。弹性容器内的子元素就可以按照一定的规则排列，这个规则就是弹性盒子布局。 弹性布局的主要特点是可以在不同的屏幕大小和设备上...
flex布局space-between最后一行不能左对齐的一种解决方法
yy祝的博客
01-12 1035
在使用了flex布局，并设置的自动换行，justify-content为space-between的时候可能会出现最后一行不能左对齐的一种解决方法
flex布局实现多个盒子平均分布并换行（五个盒子三个一行另外两个换行靠左对齐显示）
lzfengquan的博客
07-19 5697
项目中常常遇见有好多的内容会让我们用图片的形式进行展示，但是有的时候因为用了flex可能会忘记一些细节， 加入台后返回5条数据，我们展示一行只能3个，剩下两个要换行 并且要靠左，还要有间距 看看图 里面的就自己慢慢画吧， 这个里面写的是死的，到时候肯定是后台返回数据展示 代码 <template> <div class="analysisTask"> <ul class="chartListUl"> <li>
flex弹性布局；justify-content:space-between；最后一行左对齐
m0_56168677的博客
01-02 2324
flex弹性布局;justify-content:space-between；最后一行左对齐
flex布局 justify-content:space-between 最后一行左对齐
weixin_51281841的博客
09-01 924
flex布局 justify-content:space-between 最后一行左对齐
flex布局中 justify-content: space-between方法的排版问题
reg183的专栏
11-11 596
flex给我们的布局带来了很大的方便 ，但有时候也会碰到一些问题，比如space-between最后一行元素的排列问题 问题：假如我们有8个元素 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <.
flex布局设置justify-content为space-between，最后一个元素无法右对齐
djs0513的博客
06-15 3517
flex布局设置justify-content为space-between，最后一个元素无法右对齐 给flex盒子设置justify-content:space-between，双行排列时出现最后一个元素无法右侧对齐的情况，如下图所示。 可以看到item4和item2在右侧没有对齐，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docum
flex布局 justify-content：space-between出现最后一行个数不够 布局混乱
Jocelyn_书
07-27 737
网上有很多方法是用after伪元素添加，但是有时候浏览器的大小屏导致列数不确定就不能固定添加 解决方法:放置占位元素,占位元素宽度与其他元素宽度一直,高度为0 具体代码： <ul class="tag-list-wrap flex-wrap flex-hh j-between"> <li v-for="(arr,index) in tagList" :key="index" class="tag-list-item-wrap flex-wrap a-center...
Flex两端对齐，最后一行数量不够的问题
weixin_49537001的博客
11-26 1808
Flex两端对齐，最后一行数量不够的问题 需求： 列表循环，一行四个，两端对齐 代码： ul { display: flex; justify-content: space-between; flex-wrap: wrap; li { width: 20vw; } } 效果： 问题： 尾行一个或四个的时候符合
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值