如何使用 CSS columns 布局来实现自动分组布局？

最近在项目中碰到这样一个布局，有一个列表，先按照 4 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 2 的布局，有点像一个个独立的分组，然后水平排列，如下

image.png

图中序号是 dom 序列，所以其实这这样的一个顺序

image.png

很多同学可能会想到给子元素分组（通过 JS将原数组拆分组合成一个二维数组），每 8 个套一层容器，然后水平排列就行了

image.png

是不是有点麻烦呢？

其实，无需单独嵌套容器也能实现类似分组的效果，这就需要借助本文要介绍的 column 布局了，一起看看吧~

一、简单介绍一下 columns

平时接触较多的都是flex或者grid，但还有一个columns布局往往被忽视了。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/columns

columns布局，又称“多列”布局（或者“分栏”布局），这是一个使用场景比较有限，但是几乎无法被替代的一种布局。

使用非常简单，直接看一个例子，假设有这样一段文本

p{width: 500px;
}
<p>欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如这篇文章，如何使用 CSS columns 布局来实现自动分组布局，一起看看吧</p>

默认是这样的

image.png

下面我们将段文本分成3列

p{columns: 3;
}

看，自动就分成了3列

image.png

并且阅读顺序是从左到右，从上到下，直到整列阅读完成，非常类似以前的报刊读物阅读习惯。

除了指定列数，还可以根据指定宽度自动去计算列数，比如

p{columns: 100px;
}

效果如下

image.png

这个表示按照最小100px去分段，看最多可以分成多少列，并不是说每列就一定是 100，应该是大于等于 100，直到剩余空间可以再放下一列。

那为啥设置的是100，总宽度是500，却只分成了4列？原因是有默认列间距，如果去除这个间距

p{column-gap: 0px;
}

这样就刚好被分成了5列

image.png

看不清楚？加个分割线试试

p{column-rule: 1px solid red;
}

是不是刚好分成了 5 列？（注意，这里的分割线是不占空间的）

image.png

简单了解columns多列布局后，下面来看另外的用途

二、columns 实现横向分组布局

可能你已经发现了，上面的文本分列布局和我们文章开头所需要的效果非常类似，都是一列一列的，因此我们可以尝试用columns布局来实现这样的效果

假设html是这样的

<div class="wrap"><div class="list"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div><div class="item">11</div><div class="item">12</div><div class="item">13</div><div class="item">14</div></div>
</div>

这里多了一层wrap是用来做滚动容器的，简单修饰一下

.wrap{display: flex;width: 400px;overflow: auto;outline: 1px dashed #9747FF;
}
.item{display: inline-flex;width: 80px;margin: 10px;aspect-ratio: 1/1;background: #FFE8A3;color: #333;font-size: 30px;border-radius: 10px;align-items: center;justify-content: center;
}

效果如下，很正常的一个布局

image.png

现在，我们希望纵向高度是固定的，然后横向滚动，先加一个高度试试

.list{height: 200px;
}

这样就变成了纵向滚动的布局了

Kapture 2023-10-25 at 23.27.57.gif

那么，如何让它横向分栏并且滚动呢？其实非常简单，只需要添加一行

.list{height: 200px;column-width: 400px;
}

设置分栏宽度为滚动容器宽度之后，就自动将整个列表分成多组了，相当于每个滚动屏幕作为一组，从左到右排列，由于空间不足，所以可以横向滚动

Kapture 2023-10-25 at 23.34.40.gif

是不是非常神奇？仅需一个属性就实现了纵向滚动到横向滚动的切换

三、借助 scroll-snap 实现轮播效果

通常碰到这种横向滚动的效果，你可能会想到一个swiper组件，也就是那种一屏一屏切换的效果，没错，我们这里也可以借助scroll-snap轻易实现。

关于 scroll-snap，网上教程非常多，MDN 官网也有非常清晰的 demo，如果不熟悉的可以先去了解一下： https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-...

这里就不详细介绍了。

回到这里，由于整个列表下面只有一层子元素，好像并没有办法区分每一屏的临界点。其实不然，可以想一下，这里每一屏有 8 个元素，也就是第1、9、17...个分别是每一屏的第一个元素，是不是可以以这些元素为标识（吸附对象）呢?

首先要在滚动容器下定义一下

.wrap{scroll-snap-type: x mandatory;
}

然后给第1、9、17...个元素添加吸附对象，这里可以用nth-child选择器

.item:nth-child(8n+1){scroll-snap-align: start;
}

效果如下（为了区分，把每一屏的第一个元素背景做了高亮）

Kapture 2023-10-25 at 23.53.49.gif

还可以多添加点元素，多切几屏看看效果

Kapture 2023-10-25 at 23.59.05.gif

完整代码可以参考：

  • CSS column (codepen.io)')点击预览

四、CSS 实现的优势和总结

相对于传统的 JS实现来说，有哪些好处呢？

  1. 少了一层嵌套容器，业务逻辑会更加干净
  2. 自适应强，可以根据需求选择固定列数或者固定宽度，JS往往只能根据数量去分组
  3. 不会报错，想想看，JS中的数组经常会出现xxx.slice is not function这样的错误，轻则警告，总则整个页面白屏
  4. 布局足够灵活，想横向滚动就横向滚动，想纵向滚动就纵向滚动，而JS方式往往还需要改变数组形态

有这么多好处还不赶紧用起来？下面再来回顾一下columns布局

  1. columns布局，又称“多列”布局（或者“分栏”布局），可以将默认的文本流轻易分成多栏，非常类似以前的报刊读物排版
  2. column可以通过宽度(column-width)去自动分割，或者通过指定数量(column-count)将布局分成多少栏
  3. column-gap可以设置分栏之间的空隙，默认是有间隔的
  4. column-rule可以设置分隔线，这种分割线是不占据空间的
  5. columns布局使用场景比较有限，但是几乎无法被替代

多想象一下，其实可以有更多的使用场景，虽然本来并不是做这个事情的。

相关内容拓展：（技术前沿）

近 10 年间，甚至连传统企业都开始大面积数字化时，我们发现开发内部工具的过程中，大量的页面、场景、组件等在不断重复，这种重复造轮子的工作，浪费工程师的大量时间。

针对这类问题，低代码把某些重复出现的场景、流程，具象化成一个个组件、api、数据库接口，避免了重复造轮子。极大的提高了程序员的生产效率。

介绍一款程序员都应该知道的软件 JNPF 快速开发平台，基于 Java/.Net 双技术引擎，专注于低代码，采用业内领先的 SpringBoot 微服务架构、支持 SpringCloud 模式，完善了平台的扩增基础，满足了系统快速开发、灵活拓展、无缝集成和高性能应用等综合能力；采用前后端分离模式，前端和后端的开发人员可分工合作负责不同板块，省事又便捷。

免费体验官网：www.jnpfsoft.com/?csdn

最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【算法心得】When data range not large, try Bucket sort

【算法心得】When data range not large, try Bucket sort

https://leetcode.com/problems/maximum-number-of-coins-you-can-get/description/?envTypedaily-question&envId2023-11-24 I solve this problem by sorting piles first, and choose piles for(let i1;i<(piles.length/3)*2;i2) but: o(≧口≦)o Problem must …
阅读更多...
ISCTF2023新生赛Misc部分WP

ISCTF2023新生赛Misc部分WP

ISCTF2023新生赛部分WP MISC&#xff1a;签到&#xff1a;你说爱我&#xff1f;尊嘟假嘟&#xff1a;小蓝鲨的秘密&#xff1a;easy_zip:杰伦可是流量明星&#xff1a;蓝鲨的福利&#xff1a;Ez_misc:PNG的基本食用:小猫&#xff1a;MCSOG-猫猫&#xff1a;镜流:stream&#xf…
阅读更多...
基于OpenCV的手势识别系统设计与开发

基于OpenCV的手势识别系统设计与开发

摘要 随着计算机技术与信息处理技术迅速发展&#xff0c;智能化电子设备逐渐进入到日常的生产和生活中&#xff0c;与此同时&#xff0c;人们对电子设备操作过程的便捷化也提出了新的要求&#xff0c;这也促使计算机进行图像处理的技术也得到了发展。近些年兴起的模式识别技术…
阅读更多...
1.自动化运维工具Ansible的安装

1.自动化运维工具Ansible的安装

1.物料准备 四台服务器&#xff0c;其中一个是主控机&#xff0c;三个为host 2.安装 在主控机上安装ansible 2.1 设置EPEL仓库 Ansible仓库默认不在yum仓库中&#xff0c;因此我们需要使用下面的命令启用epel仓库。 yum install epel-release -y2.2 执行安装命令 yum i…
阅读更多...
网站上https协议，nginx配置SSL，443端口

网站上https协议，nginx配置SSL，443端口

nginx配置ssl 要给自己的网站上ssl证书&#xff0c;使用https协议。首先你需要有证书文件&#xff0c;这个文件是你买的服务&#xff0c;买过之后别人会给你。 就是这样的文件&#xff1a; 然后你就把文件上传到服务器的一个位置&#xff0c;你记住这个位置&#xff0c;后面配…
阅读更多...
java审计之java反序列化-CC链

java审计之java反序列化-CC链

介绍 序列化的本质是内存对象到数据流的一种转换&#xff0c;我们知道内存中的东西不具备持久性&#xff0c;但有些场景却需要将对象持久化保存或传输。 在Java工程中&#xff0c;序列化还广泛应用于JMX&#xff0c;RMI&#xff0c;网络传输&#xff08;协议包对象&#xff09…
阅读更多...
封装Redis工具类（泛型返回加函数式声明参数）

封装Redis工具类（泛型返回加函数式声明参数）

小编最近在看实战redis&#xff0c;黑马的&#xff0c;看到有一章是P46封装Redis工具类 废话不多说&#xff01;直接上代码 调用的代码&#xff1a; //具体的上下文代码去b站找黑马redis入门到实战 P46集//优雅的写出这样&#xff0c;参数意义看方法&#xff01; Shop shop …
阅读更多...
万字长文——这次彻底了解LLM大语言模型

万字长文——这次彻底了解LLM大语言模型

文章目录 前言一、浅析语言模型中的核心概念1.1分词&#xff1a;1.2词向量&#xff1a;1.3神经概率语言模型 二、大语言模型发展历程三、LLM基本结构3.1预训练阶段工作步骤3.2预训练阶段模型结构3.3Fine-tuning&#xff08;微调&#xff09; 前言 在深入学习LLM&#xff08;大…
阅读更多...
Java-MyBatis

Java-MyBatis

1.基础 1.1 pom <dependencies><!--MyBatis核心--><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.7</version></dependency><!--MySql驱动--><dependency&…
阅读更多...
看看京东的接口优化技巧，确实很优雅！！

看看京东的接口优化技巧，确实很优雅！！

大家好&#xff0c;最近看到京东云的一位大佬分享的接口优化方案&#xff0c;感觉挺不错的&#xff0c;拿来即用。建议收藏一波或者整理到自己的笔记本中&#xff0c;随时查阅&#xff01; 下面是正文。 一、背景 针对老项目&#xff0c;去年做了许多降本增效的事情&#xf…
阅读更多...
10分钟的时间，带你彻底搞懂JavaScript数据类型转换

10分钟的时间，带你彻底搞懂JavaScript数据类型转换

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热衷分享有趣实用的文章&#xff0c;希望大家多多支持&#xff0c;一起进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 目录 JS数据类型 3种转换类型 ToBoolean ToString ToNumber 对象转原…
阅读更多...
23.Oracle11g的UNDO表空间

23.Oracle11g的UNDO表空间

Oracle的UNDO表空间 一、UNDO表空间概述1、什么是UNDO表空间2、UNDO表空间的作用2.1 提供一致性读2.2 回滚事务2.3 实例恢复 3、UNDO表空间的工作机制 二、UNDO表空间的相关操作1、UNDO表空间的创建2、UNDO表空间的管理 三、Oracle 11g中UNDO表空间的新特性1、UNDO表空间自动管…
阅读更多...
token认证机制，基于JWT的Token认证机制实现，安全性的问题

token认证机制，基于JWT的Token认证机制实现，安全性的问题

文章目录 token认证机制几种常用的认证机制HTTP Basic AuthOAuthCookie AuthToken AuthToken Auth的优点 基于JWT的Token认证机制实现JWT的组成认证过程登录请求认证 对Token认证的五点认识JWT的JAVA实现 基于JWT的Token认证的安全问题确保验证过程的安全性如何防范XSS Attacks…
阅读更多...
循环神经网络RNN

循环神经网络RNN

1. 背景 RNN(Recurrent Neural Networks) CNN利用输入中的空间几何结构信息&#xff1b;RNN利用输入数据的序列化特性。 2. SimpleRNN单元 传统多层感知机网络假设所有的输入数据之间相互独立&#xff0c;但这对于序列化数据是不成立的。RNN单元用隐藏状态或记忆引入这种依赖…
阅读更多...
CSS特效022：小球抛物线效果

CSS特效022：小球抛物线效果

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…
阅读更多...
open3d-点云及其操作

open3d-点云及其操作

open3d提供了一个专门用于点云的数据结构 PointCloud。 class PointCloud(Geometry3D):color # 颜色normals # 法向量points # 点云def __init__(self, *args, **kwargs):"""__init__(*args, **kwargs)Overloaded function.1. __init__(self: open3d.cpu.py…
阅读更多...
数据探索：五款免费数据可视化工具概览

数据探索：五款免费数据可视化工具概览

数据可视化是解读和传达数据的重要方式&#xff0c;而现在有许多免费的工具可供选择&#xff0c;让您在探索数据时更轻松、更有趣。以下是五款推荐的免费数据可视化工具&#xff1a; Tableau Public&#xff1a; Tableau Public是一款功能强大的可视化工具&#xff0c;能够创建…
阅读更多...
宏定义中 ## 和 # 的作用

宏定义中 ## 和 # 的作用

1. ## 的作用 ## 称为连接符&#xff0c;用来将宏参数或其他的串连接起来。 例1&#xff1a; > #define COMBIN(arg) my##arg则> COMBIN(abc)相当于 myabc 例2&#xff1a;#define CON1(a, b) a##e##b #define CON2(a, b) a##b##00 那么&#xff1a;printf("%f\…
阅读更多...
文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《基于分布鲁棒优化的广义共享储能容量配置方法》

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《基于分布鲁棒优化的广义共享储能容量配置方法》

这个标题涉及到储能系统的容量配置方法&#xff0c;具体而言&#xff0c;是一种基于分布鲁棒优化的广义共享储能容量配置方法。让我们逐步解读&#xff1a; 基于分布鲁棒优化&#xff1a; 这表明该方法采用了一种优化技术&#xff0c;即分布鲁棒优化。分布鲁棒优化通常是指在考…
阅读更多...
大数据-之LibrA数据库系统告警处理（ALM-37016 MPPDBServer执行XLOG日志归档命令异常）

大数据-之LibrA数据库系统告警处理（ALM-37016 MPPDBServer执行XLOG日志归档命令异常）

告警解释 当集群中的CN实例或者DN实例执行归档命令归档XLOG日志失败时&#xff0c;产生该告警。 在下次执行成功时告警自动恢复。 告警属性 告警ID 告警级别 可自动清除 37016 严重 是 告警参数 参数名称 参数含义 ServiceName 产生告警的服务名称 RoleName 产生…
阅读更多...
最新文章

Copyright @ 2022~2023