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>

.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)

.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)

.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

.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 改造

.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 属性的简写

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

.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！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/350161.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

遇到这3种接口测试问题，其实，你可以这么办~

遇到这3种接口测试问题，其实，你可以这么办~

作为整个软件项目的必经环节&#xff0c;软件测试是不可缺少的“查漏补缺”环节。而作为软件测试中的重要一环——接口测试&#xff0c;几乎串联了整个项目所有的输入和输出环节。 前几年&#xff0c;我在做后端测试时&#xff0c;接触最多的正是接口测试。基于此&#xff0c;…
阅读更多...
python使用PaddleOCR实现《命名实体识别项目》OCR（已实现）（ai领域必看，简单易用）

python使用PaddleOCR实现《命名实体识别项目》OCR（已实现）（ai领域必看，简单易用）

1.简介&#xff1a; PaddleOCR是飞桨&#xff08;PaddlePaddle&#xff09;推出的一个端到端的光学字符识别开源工具集&#xff0c;支持中文、英文、数字以及特殊符号等各种类型的文字检测、识别和词语整体识别。该工具集使用PaddlePaddle深度学习框架技术&#xff0c;提供了多…
阅读更多...
【斯坦福计网CS144项目】Lab2 实现一个简单的 TCP 接收类

【斯坦福计网CS144项目】Lab2 实现一个简单的 TCP 接收类

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…
阅读更多...
21.Arrays类

21.Arrays类

Arrays类 1. 概述2. 常见方法3. sort 方法的自定义排序4. 代码示例5. 输出结果6. 注意事项 1. 概述 Arrays类是Java中的一个工具类&#xff0c;位于java.util包中。 它提供了一组静态方法&#xff0c;用于操作数组。通过Arrays类&#xff0c;我们可以对数组进行复制、填充、排…
阅读更多...
【第四天】蓝桥杯备战

【第四天】蓝桥杯备战

题 1、求和2、天数3、最大缝隙 1、求和 https://www.lanqiao.cn/problems/1442/learning/ 解法&#xff1a;字符串方法的应用 import java.util.Scanner; // 1:无需package // 2: 类名必须Main, 不可修改public class Main {public static void main(String[] args) {Scann…
阅读更多...
MSG3D论文解读

MSG3D论文解读

论文在stgcn与sta-lstm基础上做的。下面讲一下里面的方法&#xff1a; 1.准备工作 符号。这里是对符号进行解释。 一个人体骨骼图被记为G(v,E) 图卷积&#xff1a; 图卷积定义 考虑一种常用于处理图像的标准卷积神经网络 (CNN)。输入是像素网格。每个像素都有一个数据值向…
阅读更多...
kubeSphere DevOps自定义容器 指定nodejs版本

kubeSphere DevOps自定义容器 指定nodejs版本

✨✨✨✨✨✨ &#x1f380;前言&#x1f381;基于内置镜像构建&#x1f381;把镜像添加基础容器中&#x1f381;检查容器是否配置成功&#x1f381;不生效的原因排查&#x1f381;按步骤执行如下命令 &#x1f380;前言 由于我本地的开发环境node是16.18.1,而自带容器node的版…
阅读更多...
项目中遇到通过域名访问服务提示 Service name unknow

项目中遇到通过域名访问服务提示 Service name unknow

目录 项目中遇到通过域名访问服务提示 Service name unknow 1.问题描述2.问题原因3.解决思路4.解决方案文章所属专区 项目问题解决 1.问题描述 在CentOS 系统环境下 项目中遇到通过域名访问服务提示 Service name unknow，但是 网络是连通的 通过ping 和telnet都能够验证。 …
阅读更多...
win10+elasticsearch8.12 安装教程

win10+elasticsearch8.12 安装教程

Elasticsearch是一种搜索引擎&#xff0c;本地安装完成之后&#xff0c;可使用其他编程语言&#xff08;例如python&#xff09;与elasticsearch建立连接&#xff0c;然后使用python脚本搜索elasticsearch中的数据 1下载 elasticsearch elasticsearch最新版官网下载链接 点击…
阅读更多...
Pandas.DataFrame.product() 乘积(累乘积) 详解 含代码 含测试数据集 随Pandas版本持续更新

Pandas.DataFrame.product() 乘积(累乘积) 详解 含代码 含测试数据集 随Pandas版本持续更新

关于Pandas版本&#xff1a; 本文基于 pandas2.2.0 编写。 关于本文内容更新&#xff1a; 随着pandas的stable版本更迭&#xff0c;本文持续更新&#xff0c;不断完善补充。 传送门&#xff1a; Pandas API参考目录 传送门&#xff1a; Pandas 版本更新及新特性 传送门&…
阅读更多...
让B端管理软件既美观又实用的解决方案来了

让B端管理软件既美观又实用的解决方案来了

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验&#xff01;希望我的分享能帮助到您&#xff01;如需帮助可以评论关注私信我们一起探讨&#xff01;致敬感谢感恩&#xff01; 让B端管理软件既美观又实用的解决方案来了 在当今数字化时代&#xff0c;B端管理软件已…
阅读更多...
Docker容器部署OpenCV，打造高效可移植的计算机视觉开发环境

Docker容器部署OpenCV，打造高效可移植的计算机视觉开发环境

推荐 海鲸AI-ChatGPT4.0国内站点&#xff1a;https://www.atalk-ai.com 前言 在计算机视觉领域&#xff0c;快速部署和测试算法是研究和开发的关键。OpenCV作为一个强大的开源计算机视觉库&#xff0c;广泛应用于各种图像处理和视频分析任务。然而&#xff0c;配置OpenCV环境可…
阅读更多...
计算机毕业设计 | SpringBoot 求职招聘管理系统(附源码)

计算机毕业设计 | SpringBoot 求职招聘管理系统(附源码)

1&#xff0c;绪论 1.1 开发背景 高学历人群是网络求职者的主体&#xff0c;且结构趋向固定。而在疫情肆虐的今日&#xff0c;线上招聘成了越来越多企业和个人选择的方式。在疫情期间线下招聘转为线上招聘&#xff0c;是疫情防控的需要。不能否定的是新的招聘模式的出现一定会…
阅读更多...
智慧应急消防柜的作用

智慧应急消防柜的作用

在现代社会&#xff0c;科技的不断进步带来了许多便利与改变。智能化的产品不仅给我们的生活带来了便捷&#xff0c;也让我们对各个领域的发展有了更高的期待。而在这种场景下&#xff0c;智慧应急消防柜作为智慧城市新型基础设施的必备品&#xff0c;正逐渐受到更多关注。 智能…
阅读更多...
《游戏-03_3D-开发》之—新输入系统人物移动攻击连击

《游戏-03_3D-开发》之—新输入系统人物移动攻击连击

本次修改unity的新输入输出系统。本次修改unity需要重启&#xff0c;请先保存项目&#xff0c; 点击加号起名为MyCtrl&#xff0c; 点击加号设置为一轴的&#xff0c; 继续设置W键&#xff0c; 保存 生成自动脚本&#xff0c; 修改MyPlayer代码&#xff1a; using UnityEngine;…
阅读更多...
设计模式二(工厂模式)

设计模式二(工厂模式)

本质&#xff1a;实例化对象不用new&#xff0c;用工厂代替&#xff0c;实现了创建者和调用者分离 满足&#xff1a; 开闭原则&#xff1a;对拓展开放&#xff0c;对修改关闭 依赖倒置原则&#xff1a;要针对接口编程 迪米特原则&#xff1a;最少了解原则&#xff0c;只与自己直…
阅读更多...
DDPM的一点笔记

DDPM的一点笔记

1 Title Denoising Diffusion Probabilistic Models&#xff08;Jonathan Ho、Ajay Jain、Pieter Abbeel&#xff09; 2 Conclusion This paper present high quality image synthesis results using diffusion probabilistic models, a class of latent variable models insp…
阅读更多...
【Qt】—— Qt开发环境的搭建

【Qt】—— Qt开发环境的搭建

目录 &#xff08;一&#xff09;Qt的开发⼯具概述 1.1 Qt Creator 1.2 Visual Studio 1.3 Eclipse &#xff08;二&#xff09;Qt SDK的下载和安装 2.1 QtSDK的下载 2.2 QtSDK的安装 2.3 验证QtSDK安装是否成功 2.4 Qt环境变量配置 &#xff08;一&#xff09;Qt的…
阅读更多...
yolov8 opencv dnn部署 github代码

yolov8 opencv dnn部署 github代码

源码地址 本人使用的opencv c github代码,代码作者非本人 实现推理源码中作者的yolov8s.onnx 推理条件 windows 10 Visual Studio 2019 Nvidia GeForce GTX 1070 opencv4.7.0 (opencv4.5.5在别的地方看到不支持yolov8的推理&#xff0c;所以只使用opencv4.7.0) c部署 先将…
阅读更多...
一、防御保护---信息安全概述

一、防御保护---信息安全概述

一、网络安全防御---信息安全概述 1.信息安全现状及挑战1.1 网络空间安全市场在中国&#xff0c;潜力无穷1.2 数字化时代威胁升级1.3 传统安全防护逐步失效1.4 安全风险能见度不足1.5 缺乏自动化防御手段1.6 网络安全监管标准愈发严苛 2.信息安全概述2.1 简介2.2 常见的网络安全…
阅读更多...
最新文章

Copyright @ 2022~2023