CSS 实现 flex布局最后一行左对齐的方案「多场景、多方案」

news/2024/5/19 20:27:17 标签: css, 前端, flex, 面试, 学习方法

目录

  • 前言
  • 解决方案
    • 场景一、子项宽度固定，每一行列数固定
        • 方法一：模拟两端对齐
        • 方法二：根据元素个数最后一个元素动态margin
    • 场景二、子项的宽度不确定
        • 方法一：直接设置最后一项 margin-right:auto
        • 方法二：使用:after(伪元素)来实现最后一行的左对齐
    • 场景三、每一行列数不固定
        • 方法一：使用 Grid 布局【最佳实践】
  • 小结

前言

在CSS flex布局中，使用 justify-content 来控制列表的水平对齐方式，使用 space-around 或者 space-between 对齐时，如果最后一行的列表的个数不满，就会出现最后一行没有完全垂直对齐的问题。

👇 如下示例：

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

css">.container {
    width: 400px;
    border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px;
}
.item {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    background-color: yellowgreen;
}

👇 可以看到最后一行的元素个数不够，不是我们想要的效果
在这里插入图片描述

解决方案

场景一、子项宽度固定，每一行列数固定

每一行的子项宽度固定，所以列数也可固定，实现方案如下。

方法一：模拟两端对齐

👉 原理
使用 margin 模拟 space-between 和元素之间的间隙

👉 计算方式： 已知每一行列数是固定的，比如每一行5(n)列
剩余可使用宽度 = .container容器宽度 - (.item宽度 * 5) 👉 width = 400 - (70 * 5) = 50
设置margin = 剩余可使用宽度 / (5 - 1) 👉 marginRight = 50 / (5 - 1) = 12.5
公示合并 👉 marginRight = (.container容器宽度 - (.item宽度 * n)) / (n-1)

css">.container {
  	width: 400px;
    border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    padding: 5px;
}
.item {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    background-color: yellowgreen;
}
.item:not(:nth-child(5n)) {
    margin-right: 12.5px;
}

👇 效果如下：
在这里插入图片描述

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

👉 原理
动态设置margin指的是设置最后一个元素的margin值。
比如我们每一行5个元素，但是最后一行只有4个元素，此时如果我们将最后一行的最后一个元素的右边距设置为元素宽度+间隙宽度，那么是可以实现左对齐效果的。

👉 计算方式： 针对最后一行，分别有一个元素，有两个元素，有三个元素，有四个元素等情况
.item:last-child:nth-child(5n - 1) => 当n为1时，5n-1=4，代表是第四个元素，marginRight 就是第五个元素的 width+1个空隙的宽度
.item:last-child:nth-child(5n - 2) => 当n为1时，5n-2=3，代表是第三个元素，marginRight 就是第四个元素的 width+第五个元素的width+2个空隙的宽度
以此类推…
.item:last-child:nth-child(5n - m)，需要之前【方法一】中计算的 _marginRight = (.container容器宽度 - (.itemWidth * n)) / (n-1)
推算公示 👉 marginRight = (.itemWidth * m + _marginRight * m)

css">.container {
  	width: 400px;
    border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px;
}
.item {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    background-color: yellowgreen;
}
/* 当n为1时，5n-1=4，代表是第四个元素，margin-right就是第五个元素的width+1个空隙的宽度 */
.item:last-child:nth-child(5n - 1) {
    margin-right: 82.5px;
}
/* 当n为1时，5n-2=3，代表是第三个元素，margin-right就是第四个元素的width+第五个元素的width+2个空隙的宽度 */
.item:last-child:nth-child(5n - 2) {
    margin-right: 165px;
}
/* 当n为1时，5n-3=2，代表是第二个元素，margin-right就是第三个元素的width+第四个元素的width+第五个元素的width+3个空隙的宽度 */
.item:last-child:nth-child(5n - 3) {
    margin-right: 247.5px;
}

👇 效果如下：

在这里插入图片描述

场景二、子项的宽度不确定

当每一个子元素宽度不固定时，此时的元素间隙的大小也不固定，所以相对来说处理更简单。

方法一：直接设置最后一项 margin-right:auto

👉 原理
让最后一个元素的右边距自动适应，从而实现左对齐的效果

👇 style

css">.container {
    width: 400px;
    border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px;
}

.item {
    width: 70px;
    height: 70px;
    margin: 10px;
    background-color: yellowgreen;
}
.item:last-child {
    margin-right: auto;
}

👇 html 改造

<div class="container">
   	<div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<script>
	// 动态随机设置 .item 宽度
    let itemDiv = document.querySelectorAll(".container .item");
    for (var i = itemDiv.length - 1; i >= 0; i--) {
        itemDiv[i].style.width = rand(70, 40) + "px";
    }
    function rand(max, min) {
        return Math.floor( Math.random() * (max - min + 1) + min);
    }
</script>

👇 效果如下（容器尺寸不变的情况下）：
在这里插入图片描述
👇 效果2如下（容器尺寸变的情况下）：
在这里插入图片描述

方法二：使用:after(伪元素)来实现最后一行的左对齐

👉 原理
使用css中的 :after(伪元素) 给 父容器 设置 flex:auto 或 flex:1 来实现最后一行的左对齐，使用伪元素进行占位

👇 style 改造

css">.container {
    width: 400px;
    border: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px;
}

.item {
    width: 70px;
    height: 70px;
    margin: 10px;
    background-color: yellowgreen;
}
.container::after {
   	content: '';
    flex: auto;    
    /* 或者flex: 1 */
}

👉 html 改造同【方法一】中的html

👉 效果与【方法一】中实现效果相同

场景三、每一行列数不固定

每一行的列数不固定，那么上面的那些方法均不适用，请看如下方案

当我们布局的列表个数不固定，这个时候我们不妨可以换一种思维，试试使用 Grid 布局。

方法一：使用 Grid 布局【最佳实践】

👉 原理
Grid 布局天然有 gap 间隙，且格子对齐排布，因此，实现最后一行左对齐可以认为是最佳效果。
👇 代码解释：
display: grid 指定一个容器采用网格布局
grid-template-columns 属性定义每一列的列宽
grid-gap 属性定义网格布局中行与列之间间隙的尺寸，它是 grid-row-gap & grid-column-gap 属性的简写

其实起来非常简单，且代码简明，请见如下代码 👇

css">.container {
    width: 400px;
    border: 1px solid #000;
    padding: 5px;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 80px);
    grid-gap: 10px;
}

.item {
    width: 70px;
    height: 70px;
    margin: 10px;
    background-color: yellowgreen;
}

👇 效果如下（容器尺寸不变的情况下）：

在这里插入图片描述

👇 效果2如下（容器尺寸变的情况下）：

在这里插入图片描述

小结

综上可见，最后一行左对齐的布局需求更适合使用 CSS grid 布局来实现，但是，repeat() 函数兼容性有些要求，IE浏览器并不支持。如果项目需要兼容IE，则此方法有待商榷。

使用上面的提供的几种方案：动态计算margin、模拟两端对齐、根据列表的个数动态控制最后一个列表元素的margin值均可正确实现左对齐效果。

所有方案各有利弊，大家还得根据自己的实际场景，选择适合当前项目的合适的方法。

如果你有其他更好的实现解决方案，欢迎评论区留言讨论，大家一起学习进步～

希望上面的内容对你的工作学习有所帮助！欢迎各位一键三连哦～

Happy coding！


http://www.niftyadmin.cn/n/5346888.html

相关文章

使用阿里云的oss对象存储服务实现图片上传(前端vue后端java详解)

使用阿里云的oss对象存储服务实现图片上传(前端vue后端java详解)

一&#xff1a;前期准备&#xff1a; 1.1&#xff1a;注册阿里云账号&#xff0c;开启对象存储oss功能&#xff0c;创建一个bucket&#xff08;百度教程多的是&#xff0c;跟着创建一个就行&#xff0c;创建时注意存储类型是标准存储&#xff0c;读写权限是公共读&#xff09;…
阅读更多...
Leetcode:二分搜索树层次遍历

Leetcode:二分搜索树层次遍历

题目&#xff1a; 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例&#xff1a; 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3],[9,…
阅读更多...
YOLOv8-Seg改进：注意力涨点系列篇 | 多尺度双视觉Dualattention | Dual-ViT，顶刊TPAMI 2023

YOLOv8-Seg改进：注意力涨点系列篇 | 多尺度双视觉Dualattention | Dual-ViT，顶刊TPAMI 2023

🚀🚀🚀本文改进：多尺度双视觉Dualattention注意yolo，提升小目标检测能力 🚀🚀🚀YOLOv8-seg创新专栏：http://t.csdnimg.cn/KLSdv 学姐带你学习YOLOv8，从入门到创新，轻轻松松搞定科研； 1）手把手教你如何训练YOLOv8-seg； 2）模型创新，提升分割性能； 3）独…
阅读更多...
自然语言处理-文本标注

自然语言处理-文本标注

文本标注 现在让我们考虑词元级任务&#xff0c;比如文本标注&#xff08;text tagging&#xff09;&#xff0c;其中每个词元都被分配了一个标签。在文本标注任务中&#xff0c;词性标注为每个单词分配词性标记&#xff08;例如&#xff0c;形容词和限定词&#xff09;。 根据…
阅读更多...
eclipse启动Java服务及注意事项

eclipse启动Java服务及注意事项

1、导入项目 选择file——》import…——》Generate——》Exiting Projects into Workspace——》选择要导入的项目 2、添加tomcat 1&#xff09;点击Serves——》No servers are available. Click this link to create a new server… 2&#xff09;点击“Add…” 3&…
阅读更多...
springboot快速写接口

springboot快速写接口

1. 建proj形式 name会变成文件夹的名字&#xff0c;相当于你的项目名称 基础包 2. 基础依赖 3. 配置数据库 这里要打开mysql&#xff0c;并且创建数据库 方法&#xff1a; 安装好数据库&#xff0c;改好账号密码用navicat来建表和账号配置properties.yml文件即可 4.用res…
阅读更多...
ERROR Failed to get response from https://registry.npm.taobao.org/ 错误的解决

ERROR Failed to get response from https://registry.npm.taobao.org/ 错误的解决

这个问题最近才出现的。可能跟淘宝镜像的证书到期有关。 解决方式一&#xff1a;更新淘宝镜像&#xff08;本人测试无效&#xff0c;但建议尝试&#xff09; 虽然无效&#xff0c;但感觉是有很大关系的。还是设置一下比较好。 淘宝镜像的地址&#xff08;registry.npm.taobao…
阅读更多...
Spring复习更新中

Spring复习更新中

Spring复习更新中 注解解释说明SpringIoc(Inversion of Control)注解 SpringBootSpringMVCSpringCloud 更新中ing JVM/GC复习已更新完 注解√指的是归属谁的注解 注解名称位置作用SpringSpringBootSpringCloudjavaValue属性/方法定义上方设置对应属性的值或者对方法进行传参√-…
阅读更多...
最新文章

Copyright @ 2022~2023