百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

让CSS flex布局最后一行左对齐的N种方法

myzbx 2025-01-29 17:00 25 浏览


作者:张鑫旭

https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/

前言

小伙伴们是否还记得,之前小编也发布了几篇关于CSS相关文章不妨一起来回顾回顾:

手把手整理CSS3知识汇总【思维导图】

关于前端CSS写法104个知识点汇总(一)

关于前端CSS写法104个知识点汇总(二)

前端开发规范:命名规范、html规范、css规范、js规范

手把手教你55 个提高CSS 开发效率的必备片段

更多的CSS实现技巧相关文章请见文章底部

一、justify-content对齐问题描述

在CSS flex布局中,justify-content属性可以控制列表的水平对齐方式,例如space-between值可以实现两端对齐。

但是,如果最后一行的列表的个数不满,则就会出现最后一行没有完全垂直对齐的问题。

如下代码:

.container {   
  display: flex;  
  justify-content: space-between;  
  flex-wrap: wrap;}
.list {    
  width: 24%; height: 100px; 
  background-color: skyblue;  
  margin-top: 15px;
}

然后列表的个数不多不少正好7个:

此时最后一行的小方块的排列就显得很尴尬了:

您可以狠狠地点击这里:最后一行flex列表没有对齐demo

此时,最后一行应该左对齐排列才是我们想要的效果,如何实现呢?

其实实现的思路和display:inline-block的两端对齐是一样的。

二、如果每一行列数是固定的

如果每一行列数是固定的,则下面两种方法可以实现最后一行左对齐。

方法一:模拟space-between和间隙

也就是我们不使用
justify-content:space-between声明在模拟两端对齐效果。中间的gap间隙我们使用margin进行控制。

例如:

.container {   
  display: flex;  
  flex-wrap: wrap;}
.list {   
  width: 24%; 
  height: 100px;   
  background-color: skyblue; 
  margin-top: 15px;
}
.list:not(:nth-child(4n)) { 
  margin-right: calc(4% / 3);
                     }

此时,布局效果是这样的:

方法二:根据个数最后一个元素动态margin

由于每一列的数目都是固定的,因此,我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。

例如,假设每行4个元素,结果最后一行只有3个元素,则最后一个元素的margin-right大小是“列表宽度+间隙大小”的话,那最后3个元素也是可以完美左对齐的。

然后,借助树结构伪类数量匹配技术(这篇文章“伪类匹配列表数目实现微信群头像CSS布局的技巧”中的布局技巧就是借助这种技术实现),我们可以知道最后一行有几个元素。

例如:

  • .list:last-child:nth-child(4n - 1)说明最后一行,要么3个元素,要么7个元素……
  • .list:last-child:nth-child(4n - 2)说明最后一行,要么2个元素,要么6个元素……

在本例中,一行就4个元素,因此,我们可以有如下CSS设置:

.container {    display: flex;    justify-content: space-between;    flex-wrap: wrap;}.list {    width: 24%; height: 100px;    background-color: skyblue;    margin-top: 15px;}

效果如下GIF示意,删除列表后,布局依然稳稳地左对齐。

眼见为实,您可以狠狠地点击这里:动态匹配数量实现flex子项左对齐demo

三、如果每一子项宽度不固定

有时候,每一个flex子项的宽度都是不固定的,这个时候希望最后一行左对齐该如何实现呢?

由于此时间隙的大小不固定,对齐不严格,因此,我们可以直接让最后一行左对齐即可。具体方法有两个:

方法一:最后一项margin-right:auto

CSS代码如下:


.container {    
  display: flex; 
  justify-content: space-between;  
  flex-wrap: wrap;}
.list {    
  background-color: skyblue;
  margin: 10px;
}/* 最后一项margin-right:auto */
.list:last-child {  
  margin-right: auto;
}

最终效果如下GIF:

方法二:创建伪元素并设置flex:auto或flex:1

CSS代码如下:

.container {   
  display: flex; 
  justify-content: space-between;  
  flex-wrap: wrap;}.
  list {    background-color: skyblue;    margin: 10px;}/* 使用伪元素辅助左对齐 */.container::after {    content: '';    flex: auto;    /* 或者flex: 1 */}

最终效果如下GIF:


这两个方法我合在一个demo页面了,您可以狠狠的点击这里:flex子元素宽度不固定最后一行左对齐demo

四、如果每一行列数不固定

如果每一行的列数不固定,则上面的这些方法均不适用,需要使用其他技巧来实现最后一行左对齐。

这个方法其实很简单,也很好理解,就是使用足够的空白标签进行填充占位,具体的占位数量是由最多列数的个数决定的,例如这个布局最多7列,那我们可以使用7个空白标签进行填充占位,最多10列,那我们需要使用10个空白标签。

如下HTML示意:

相关CSS如下,实现的关键就是占位的元素宽度和margin大小设置得和.list列表元素一样即可,其他样式都不需要写。

.container {    
  display: flex;   
 justify-content: space-between;   
  flex-wrap: wrap;    margin-right: -10px;}
.list {    width: 100px; height:100px;    background-color: skyblue;    margin: 15px 10px 0 0;}/* 和列表一样的宽度和margin值 */
.container > i {    width: 100px;    margin-right: 10px;}

由于元素高度为0,因此,并不会影响垂直方向上的布局呈现。

最后的效果如下GIF图示:

您可以狠狠地点击这里:使用空白元素占位让flex布局最后一行左对齐demo

五、如果列数不固定HTML又不能调整

然而有时候,由于客观原因,前端重构人员没有办法去调整html结构,同时布局的列表个数又不固定,这个时候该如何实现我们最后一行左对齐效果呢?

我们不妨可以试试使用Grid布局。

Grid布局天然有gap间隙,且天然格子对齐排布,因此,实现最后一行左对齐可以认为是天生的效果。

CSS代码如下:

.container {    
  display: grid;  
  justify-content: space-between;  
  grid-template-columns: repeat(auto-fill, 100px);    grid-gap: 10px;}
.list {    width: 100px; height:100px;    background-color: skyblue;    margin-top: 5px;}

可以看到CSS代码非常简洁。

HTML代码就是非常规整非常普通的代码片段:

最后的效果如下GIF:

您可以狠狠地点击这里:CSS grid布局让最后一行左对齐demo

六、这几种实现方法点评

首先最后一行需要左对齐的布局更适合使用CSS grid布局实现,但是,repeat()函数兼容性有些要求,IE浏览器并不支持。如果项目需要兼容IE,则此方法需要斟酌。

然后,适用范围最广的方法是使用空的元素进行占位,此方法不仅适用于列表个数不固定的场景,对于列表个数固定的场景也可以使用这个方法。但是有些人代码洁癖,看不惯这种空的占位的html标签,则可以试试一开始的两个方法,一是动态计算margin,模拟两端对齐,另外一个是根据列表的个数,动态控制最后一个列表元素的margin值实现左对齐。

累计6种方法,各有各的优缺点,大家根据自己项目的实际场景,选择合适的方法。

如果你有其他更好的实现,也欢迎反馈与交流,我会及时在文中更新。

推荐关于CSS使用技巧知识点相关文章

手把手整理CSS3知识汇总【思维导图】

关于前端CSS写法104个知识点汇总(一)

关于前端CSS写法104个知识点汇总(二)

前端开发规范:命名规范、html规范、css规范、js规范

手把手教你55 个提高CSS 开发效率的必备片段

手把手教你常见的CSS布局方式【实践】

你未必知道的49个CSS知识点

手把手教你css 中多种边框的实现小窍门【实践】

手把手教你深入CSS实现一个粒子动效的按钮

CSS变量实现暗黑模式,我的小铺页面已经支持

手把手教你利用CSS控制文本溢出截断省略解决方案合集

今天全国哀悼日,手把手教你一段css让全站变灰

作者:张鑫旭

https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/

相关推荐

判断变量是否为数组(判断变量是否为数组的函数)

大家好,我是前端西瓜哥,今天带大家学习在JS中如何判断一个对象是否为数组。Array.isArray最好的写法是使用Array.isArray(val)。因为该方法能正确判断iframe传过...

2023-03-13:给定一个整数数组 A,坡是元组 (i, j),其中 i < j 且 A[i]

2023-03-13:给定一个整数数组A,坡是元组(i,j),其中i<j且A[i]<=A[j],这样的坡的宽度为j-i。找出A中的坡的最大宽度,如果不存在,返...

世界上形形色色的“奇葩”小望远镜②

上一篇我们介绍了在探索伽玛射线暴、超新星上大放光彩的小望远镜,但天文学所研究的领域却是非常的多,比如我们所好奇的暗物质以及太阳系外行星等,那么在这些方面做出突出贡献的“奇葩”小望远镜都是谁呢?1、蜻蜓...

C#解析多层嵌套的JSON数组(多层嵌套json转换成map)

首先引用开源类库:Newtonsoft.Json.dll,目前最低支持.NET3.5版本。官方帮助文档:http://www.newtonsoft.com/json/help/html/Samples...

Vlookup函数的这7个应用技巧都不掌握,那就真的Out了

查询引用,用到最多的函数为Vlookup,但你真的会用吗?其实,Vlookup函数除了常规的查询引用外,还有多种使用技巧一、Vlookup函数:功能及语法结构。功能:在指定的数据范围内返回符合查询要...

C语言-闲聊一维、二维数组(c语言中二维数组的定义和使用)

①若a[i]为一维数组则有,a[0],为数组的一个元素。a[i]=*(&a[i]),为数组的一个元素。a+i=&a[i],为元素a[i]的地址。*(*(a+i))=*(*&a[...

Excel常用技能分享与探讨(5-宏与VBA简介之VBA的数组与集合)

总结数组:适合处理固定大小、类型一致、需要快速访问的数据。集合:适合动态增删、键值查找或混合类型数据。根据具体需求选择合适的数据结构,可显著提升代码效率和可读性。一、从仓库管理理解数据结构(场景化入门...

数据结构串和数组(一)(数据结构串的概念)

一、串的基本概念串是由零个或多个字符组成的有限序列。记作str="a0a1…an-1"(n≥0)。串中所包含的字符个数n称为串长度,当n=0时,称为空串。一个串中任意连续的字符组成的子...

C语言进阶教程:指针数组与数组指针

在C语言中,指针和数组是两个核心且紧密相关的概念。当它们结合时,就产生了指针数组(ArrayofPointers)和数组指针(PointertoanArray)。这两者在语法、含义和用途上都...

一篇文章搞懂数组的所有知识点(一篇文章搞懂数组的所有知识点怎么写)

1.一维数组数组是一种数据结构,用来存储多个相同类型的数据,并通过索引来访问每个元素。概念描述示例代码什么是数组?数组是一种数据结构,用来存储一组相同类型的值。你可以把它想象成一个排好序的储物柜,每...

这些Java基础知识,诸佬们都还记得嘛(学习,复习,面试均可)

方法重载和方法重写的区别方法重写重写体现在继承关系上。在Java中,子类继承父类,子类就会具备父类所以的特征,以及父类的方法和变量比如动物类有“叫”的方法,小狗小猫分别继承了动物类,重写方法时就可以...

js将list转化为tree格式的几种写法

最近在考虑一个树状结构存储。最终需要将list转化为tree格式源数据示例源数据共401条[{"menuId":"5f50c5fb8f0d74536bbfb7a4"...

Java学习之数组——java基础篇(java数组知识)

如果希望保存一组有相同类型的数据,可以使用数组。数组的定义和内存分配Java中定义数组的语法有两种:typearrayName[];type[]arrayName;type为Java中的任...

C语言-数组平均值与排序(c语言数组平均数)

①目标输入一个正数数组,求平均值,并根据平均值重新排序,大于平均值的数前置,小于等于平均值的值后置。~②命令行#include<stdio.h>调用输入输出函数库#include<...

数据结构串和数组(二)(数据结构串的概念)

数组的基本概念数组是一个二元组(idx,value)的集合,对每个idx,都有一个value值与之对应。idx称为下标,可以由一个整数、两个整数或多个整数构成,下标含有d(d≥1)个整数称为维数是d。...