最近在項目中看到這樣一個布局，如下lx528資訊網(wǎng)——每日最新資訊28at.com

圖片lx528資訊網(wǎng)——每日最新資訊28at.com

布局本身沒什么奇怪的，就是 「4 * 2」 的網(wǎng)格，比較特殊的是第二行布局是從右往左的，整體是一個這樣的順序lx528資訊網(wǎng)——每日最新資訊28at.com

圖片lx528資訊網(wǎng)——每日最新資訊28at.com

而這個列表是通過一個數(shù)組動態(tài)渲染的，可能有很多同學(xué)會將這個數(shù)組分成兩份，然后將第二份進行反向，類似于這樣lx528資訊網(wǎng)——每日最新資訊28at.com

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

然后，由于第二行的第一個其實是原數(shù)組的第八個，還需要針對第二行做額外的處理，比如序列lx528資訊網(wǎng)——每日最新資訊28at.com

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

而且，如果有點擊事件，傳值也需要額外處理，雖然也能實現(xiàn)，但顯然是太麻煩，而且還容易出 bug。lx528資訊網(wǎng)——每日最新資訊28at.com

lx528資訊網(wǎng)——每日最新資訊28at.com

那么，有沒有其他更簡單、更穩(wěn)定的方式來解決呢？也就是如何讓第二行子項反向呢？lx528資訊網(wǎng)——每日最新資訊28at.com

一、flex 布局實現(xiàn)

由于這里是動態(tài)渲染，所以最理想的結(jié)構(gòu)應(yīng)該是這樣的，直接一層循環(huán)搞定lx528資訊網(wǎng)——每日最新資訊28at.com

<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都很容易實現(xiàn)4 * 2的布局，先用 flex實現(xiàn)lx528資訊網(wǎng)——每日最新資訊28at.com

.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;}

可以得到這樣的布局lx528資訊網(wǎng)——每日最新資訊28at.com

圖片lx528資訊網(wǎng)——每日最新資訊28at.com

有什么辦法在不改變 html 的情況下改變第二行的位置呢？

本文鏈接：http://www.tebozhan.com/showinfo-26-5698-0.htmlCSS 如何改變網(wǎng)格布局偶數(shù)行的排序？

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Feign如何設(shè)置超時時間，不同情況下還真不一樣

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