let arr1 = list.slice(0, 4)
let arr2 = list.slice(4, 8).reverse()
// 第一行
第 {{ i }} 个
// 第二行
第 {{ 8 - i }} 个
<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>
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 的情况下改变第二行的位置呢?
在 flex中,可以直接通过order进行排序,order越大,元素越靠后。
order
设置成1
.item:nth-child(5){
order: 1
}
0
,现在第 5 个元素的order
最大,所以它跑到了最后面order
分别一次减少就行了(大于0).item:nth-child(5){
order: 4;
}
.item:nth-child(6){
order: 3;
}
.item:nth-child(7){
order: 2;
}
.item:nth-child(8){
order: 1;
}
<div class="list">
<div class="item" style="--i: 1">1</div>
<div class="item" style="--i: 2">2</div>
<div class="item" style="--i: 3">3</div>
<div class="item" style="--i: 4">4</div>
<div class="item" style="--i: 5">5</div>
<div class="item" style="--i: 6">6</div>
<div class="item" style="--i: 7">7</div>
<div class="item" style="--i: 8">8</div>
</div>
order
,如下.item:nth-child(n + 5){
order: calc( 8 - var(--i))
}
repeat(4, 1fr)
来实现一个 4 * 2
的布局.list{
display: grid;
width: 600px;
gap: 20px;
grid-template-columns: repeat(4, 1fr);
}
.item{
aspect-ratio: 1/1;
background: royalblue;
color: #fff;
font-size: 30px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
效果如下
grid-template-areas
来实现,比如我们这样命名.list{
/**/
grid-template-areas:
'a1 a2 a3 a4'
'a5 a6 a7 a8';
}
a1~a8
一共八块区域,为了方便映射,我们可以在生成 html
时,通过 CSS 变量带上这些名称<div class="list">
<div class="item" style="--i: a1">1</div>
<div class="item" style="--i: a2">2</div>
<div class="item" style="--i: a3">3</div>
<div class="item" style="--i: a4">4</div>
<div class="item" style="--i: a5">5</div>
<div class="item" style="--i: a6">6</div>
<div class="item" style="--i: a7">7</div>
<div class="item" style="--i: a8">8</div>
</div>
.item{
/**/
grid-area: var(--i);
}
grid-template-areas
就行了.list{
/**/
grid-template-areas:
'a1 a2 a3 a4'
'a8 a7 a6 a5'; /* 把第二行反向 */
}
上面的例子只有两行,如果有多行呢,并且行数不定,如何处理呢?就像这样的
4
,那么,第二行就是5
、6
、7
、8
,隔一行,第四行就是13
、14
、15
、16
,依次类推。:nth-child
,由于是隔一行,所以是每 8 个一个循环,可以这样来选择偶数行,如下.item:nth-child(8n + 5){
/*选择第5、13、21...*/
}
.item:nth-child(8n + 6){
/*选择第6、14、22...*/
}
.item:nth-child(8n + 7){
/*选择第7、15、23...*/
}
.item:nth-child(8n + 8){
/*选择第8、16、24...*/
}
order
是0
,如果改变其他的order
肯定会跑到后面去,为了避免影响,可以先手动设置order
.item{
/**/
order: var(--i);
}
order
需要加 3order
需要加 1order
需要减 1order
需要减 3.item:nth-child(8n + 5){
order: calc(var(--i) + 3)
}
.item:nth-child(8n + 6){
order: calc(var(--i) + 1)
}
.item:nth-child(8n + 7){
order: calc(var(--i) - 1)
}
.item:nth-child(8n + 8){
order: calc(var(--i) - 3)
}
评论
全部评论
{{reply.username}} 回复:{{reply.replyname}}
{{reply.content}}