当前位置：首页 > 科技 > 软件

CSS 如何改变网格布局偶数行的排序？

来源：责编：时间：2023-08-14 22:00:39 210观看

导读最近在项目中看到这样一个布局，如下图片布局本身没什么奇怪的，就是「4 * 2」的网格，比较特殊的是第二行布局是从右往左的，整体是一个这样的顺序图片而这个列表是通过一个数组动态渲染的，可能有很多同学会将这个数组分成

最近在项目中看到这样一个布局，如下

图片

布局本身没什么奇怪的，就是「4 * 2」的网格，比较特殊的是第二行布局是从右往左的，整体是一个这样的顺序

图片

而这个列表是通过一个数组动态渲染的，可能有很多同学会将这个数组分成两份，然后将第二份进行反向，类似于这样

let arr1 = list.slice(0, 4)let arr2 = list.slice(4, 8).reverse()

然后，由于第二行的第一个其实是原数组的第八个，还需要针对第二行做额外的处理，比如序列

// 第一行第 {{ i }} 个// 第二行第 {{ 8 - i }} 个

而且，如果有点击事件，传值也需要额外处理，虽然也能实现，但显然是太麻烦，而且还容易出 bug。

那么，有没有其他更简单、更稳定的方式来解决呢？也就是如何让第二行子项反向呢？

一、flex 布局实现

由于这里是动态渲染，所以最理想的结构应该是这样的，直接一层循环搞定

<class="list">  <class="item">1</div>  <class="item">2</div>  <class="item">3</div>  <class="item">4</div>  <class="item">5</div>  <class="item">6</div>  <class="item">7</div>  <class="item">8</div></div>

通过 flex 或者 grid都很容易实现4 * 2的布局，先用 flex实现

.list{  display: flex;  width: 600px;  gap: 20px;  flex-wrap: wrap;}.item{  width: calc( (100% - 60px) / 4 );  aspect-ratio: 1/1;  background: royalblue;  color: #fff;  font-size: 30px;  border-radius: 10px;  display: flex;  align-items: center;  justify-content: center;}

可以得到这样的布局

图片

有什么办法在不改变 html 的情况下改变第二行的位置呢？

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-5698-0.htmlCSS 如何改变网格布局偶数行的排序？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Feign如何设置超时时间，不同情况下还真不一样

下一篇：到底该不该使用Python?

标签：

热门焦点

一加Ace2 Pro真机揭晓钛空灰配色质感拉满

终于，在经过了几波预热之后，一加Ace2 Pro的外观真机图在网上出现了。还是博主数码闲聊站曝光的，这次的外观设计还是延续了一加11的方案，只是细节上有了调整，例如新加入了钛空灰
K60至尊版刚预热一加Ace2 Pro正面硬刚

Redmi这边刚如火如荼的宣传了K60 Ultra的各种技术和硬件配置，作为竞品的一加也坐不住了。一加中国区总裁李杰发布了两条微博，表示在自家的一加Ace2上早就已经采用了和PixelWo
如何正确使用:Has和:Nth-Last-Child

我们可以用CSS检查，以了解一组元素的数量是否小于或等于一个数字。例如，一个拥有三个或更多子项的grid。你可能会想，为什么需要这样做呢？在某些情况下，一个组件或一个布局可能会
大厂卷向扁平化

来源：新熵作者丨南枝编辑丨月见大厂职级不香了。俗话说，兵无常势，水无常形，互联网企业调整职级体系并不稀奇。7月13日，淘宝天猫集团启动了近年来最大的人力制度改革，目前已形成一
造车两年股价跌六成，小米的估值逻辑变了吗？

如果从小米官宣造车后的首个交易日起持有小米集团的股票，那么截至2023年上半年最后一个交易日，投资者将浮亏59.16%，同区间的恒生科技指数跌幅为52.78%
华为HarmonyOS 4.0将于8月4日发布或搭载AI大模型技术

华为宣布HarmonyOS4.0将于8月4日正式发布。此前，华为已经针对开发者公布了HarmonyOS4.0，以便于开发者提前进行适配，也因此被曝光出了一些新系统的特性
AMD的AI芯片转单给三星可能性不大与台积电已合作至2nm制程

据 DIGITIMES 消息，英伟达 AI GPU 出货逐季飙升，接下来 AMD MI 300 系列将在第 4 季底量产。而半导体业内人士表示，近日传出 AMD 的 AI 芯片将转单给
苹果140W USB-C充电器：采用氮化镓技术

据10 月 30 日 9to5 Mac 消息报道，当苹果推出新的 MacBook Pro 2021 时，该公司还推出了新的 140W USB-C 充电器，附赠在 MacBook Pro 16 英寸机型的盒子里，也支
利用职权私自解除被封帐号 Meta开除20多名员工

11月18日消息，据外媒援引知情人士表示，过去一年时间内，Facebook母公司Meta解雇或处罚了20多名员工以及合同工，指控这些人通过内部系统以不当方式重置用户帐号，其