解决flex布局space-between最后一行不居左对齐问题

原创 已于 2024-03-22 08:48:39 修改 · 1.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css

于 2024-03-20 20:27:25 首次发布

大家在使用flex布局，justify-content: space-between的时候经常会遇到一种情况就是当最后一行的盒子个数大于1的时候不能完美排列的问题，网上也有很多种解决方法。但都不是很满意，于是我就思考出了这种方式：就是在循环完数据之后，再添加n个高度为零，与排列项等宽的盒子，就能让justify-content: space-between继续生效，而由于添加的盒子没有高度，所以在页面中不会显示。

解决之前：
在这里插入图片描述
解决之后：
在这里插入图片描述
代码如下：

    <div class="container-main">
      <div
最低0.47元/天 解锁文章
Vue - flex布局 justify-content: space-around / space-between 最后一行元素不对其解决方案（JS）
🏆 前端领域优质创作者
05-24 7967
前言 本文的解决方案不止适用于Vue（只不过用它做示例），原生JS或其他框架均可借助该算法完成。 使用flex布局时，设置justify-content:space-around/space-between属性后，会出现如下图所示问题： 我们希望最后一行居左对齐排列，如下图所示： 解决方案 解决方案有很多种，本文使用补齐元素方式完成，而非:after插入或更改布局。 Gitee仓库地址（代码中有超级详细的注释）：https://gitee.com/wangjia
flex布局篇——justify-cont:center/space-between/space-around最后一行靠左
Dove言和
07-27 1070
flex布局篇——justify-cont:center/space-between/space-around最后一行靠左
CSS 解决 Flex 布局中 justify-content: space-between； 导致最后一排项目分散对齐的问题
最新发布
jia2799897415的博客
02-21 1198
flex-growmargin：适合动态项目数量，简单易用。伪元素填充：适合需要兼容的场景。grid布局：适合固定列数或动态列数的场景，推荐使用。动态计算间距：适合固定列数的场景。根据具体需求选择合适的方法即可！
CSS 中 flex 布局最后一行左对齐
小火车况且况且况且的博客
11-04 2180
CSS 中 flex 布局最后一行左对齐 使用 flex 布局的时候 同时使用属性 justify-content: sapce-between 会出现最后一行布局错乱 <div class="detail-list"> <div class="list-box"> <image class="list-image" src="{{listItem.im...
flex布局使用space-between后最后一行左对齐
izz520的博客
09-25 2653
在布局中，使用了flex的justify-content: space-between属性后，如何让最后一行的元素左对齐，而不是两端对齐
解决flex布局space-between最后一行左对齐的方法
11-20
首先看代码和效果↓ <style> .main { outline: 1px solid; display: flex; justify-content: space-between; flex-wrap: wrap; } .main>div { width: 100px; height: 100px; margin-bottom: 10px; backg
完美解决flex布局中space-between最后一行不居左对齐问题
Storm_Bluecat的博客
03-26 6048
完美解决flex布局中space-between最后一行不居左对齐问题展示效果问题解决前问题解决后直接贴代码（.vue文件）原理 展示效果 问题解决前 问题解决后 直接贴代码（.vue文件） // html <template> <div class="warp"> <div v-for="(item, index) in dataList" :key="index" class="item">{{ item }}</div> &
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
解决flex布局space-between 最后一行不对齐的问题
柑橘乌云_
10-12 2572
方案： 对于最后一行的元素动态设置margin-right。判断如果最后一个元素处于当前列，会发生布局错乱，则设置元素的 margin-right 为剩余空间的大小（剩余列宽度+剩余间隙大小）。假设元素宽度是$width，总间隙是 $space（盒子宽度-元素宽度*列数）。适用于每一行列数固定，且列宽度固定，需要进行计算，相比较复杂。第三个元素宽度+第四个元素宽度+剩余间隙。方法一：给父级元素后面添加。
flex布局设置space-between(around)最后一行不左对齐问题
热门推荐
RistonTea的博客
06-21 1万+
需求：在项目布局上使用弹性布局，要求每个盒子两端要对齐，而且最后一行在列不满的情况下要求左对齐； 遇到问题： 使用flex的设置justify-content为space-between;发现最后一行不能左对齐，而是两端对齐方式导致形成下图1，图2所示的问题 图1 图2 解决办法：俩种 一.添加几个空格子，格子高度为0 根据布局列数添加红格子(指上面的div)，每行...
css3 flex布局 justify-content:space-between 最后一行左对齐
11-21
在CSS3的Flex布局中，`justify-content: space-between`是一种常见的水平分配方式，它将元素之间的空白均匀分布，首尾元素紧贴容器边界。然而，当你试图通过`justify-self: start`使最后一行的元素左对齐时，你会...
flex布局 关于space-between最后一行向左对齐的解决方法
qq_42115928的博客
12-30 2874
space-between是flex布局中，一种两端对齐的排列方法, 当最后一排的元素个数不足时，会自动向两端散开或居中。 解决方法： 主要思路为在父元素里面添加一个after伪元素,宽度与子元素宽度相同 当排列方式为一行两个、三个时 HTML <div class="father"> <div class="son"></div> </div> ...
css问题：display:flex布局+justify-content: space-between； 最后一行不能左对齐
qq_44146522的博客
09-05 1923
h1>方法2：网格布局 display: grid;问题：flex布局+justify-content: space-between;最后一行不能左对齐方法1：display: flex;/* 一行减去item的宽度后剩下的间距 *//* 一行减去item的宽度后剩下的间距 *//* 每个item左右的间距 *//* 每个item左右的间距 *//* 一行几个 *//* 一行几个 */
flex 布局使用 space-between 时将最后一行左对齐
UserGuan的博客
08-05 1166
判断如果最后一个元素处于当前列，会发生布局错乱，则设置元素的 margin-right 为剩余空间的大小(剩余列宽度 + 剩余间隙大小)。假设元素宽度是 $width，总间隙是 $space(盒子宽度 - 元素宽度 * 列数)计算公式：宽度为30%，则剩余间隙：100% - 30% * 3 = 10%计算公式：宽度为22%，则剩余间隙：100% - 22% * 4 = 12%计算公式：宽度为18%，则剩余间隙：100% - 18% * 5 = 10%特点：适用于任意列数布局，比较简单，缺点是会产生空标签。
解决flex 布局多行时 最后一行没有左对齐
console.log(‘一只小菜鸟’)
01-11 938
flex布局是一维布局 Grid布局是二维布局 flex布局是轴线布局 只能指定"项目"针对轴线的位置 Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格
flex布局space-between最后一行不能左对齐的一种解决方法
yy祝的博客
01-12 1223
在使用了flex布局，并设置的自动换行，justify-content为space-between的时候可能会出现最后一行不能左对齐的一种解决方法
解决flex布局处理最后一行分布不是左对齐的问题
Jul的博客
11-20 271
我的答案是不用flex，flex布局处理这个有多种方法，但是都不方便且不符合动态分配原理。我们可以采用grid来解决这个问题，改动也不多。
flex弹性布局最后一行不对齐的处理
weixin_43867303的博客
02-15 1843
css弹性布局，行数固定、flex子项宽度不固定和行数不固定的弹性布局对齐的常见问题解决
flex布局,解决最后一排数量不够自动向两端对齐的问题
09-05
flex布局是一种弹性盒子布局，它可以解决最后一排数量不够自动向两端对齐的问题。 在flex布局中，我们可以使用justify-content属性来设置主轴方向上的对齐方式。默认情况下，它的值为flex-start，即居左对齐。如果...
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值