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

圖片Ijq28資訊網——每日最新資訊28at.com

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

圖片Ijq28資訊網——每日最新資訊28at.com

而這個列表是通過一個數組動態渲染的，可能有很多同學會將這個數組分成兩份，然后將第二份進行反向，類似于這樣Ijq28資訊網——每日最新資訊28at.com

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

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

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

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

Ijq28資訊網——每日最新資訊28at.com

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

一、flex 布局實現

由于這里是動態渲染，所以最理想的結構應該是這樣的，直接一層循環搞定Ijq28資訊網——每日最新資訊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都很容易實現4 * 2的布局，先用 flex實現Ijq28資訊網——每日最新資訊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;}

可以得到這樣的布局Ijq28資訊網——每日最新資訊28at.com

圖片Ijq28資訊網——每日最新資訊28at.com

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

本文鏈接：http://m.rrqrq.com/showinfo-26-5698-0.htmlCSS 如何改變網格布局偶數行的排序？

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

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

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