我正在使用移动优先的方法构建网站布局,然后使用媒体查询获取笔记本电脑宽度:1024px 大小。该设计有 11 个项目,并遵循弯曲的包裹方式。所有物品都有编号和颜色。
我想要左上的偶数框和右上的奇数框。它的作用恰恰相反,如图 1 所示。我希望有人能解决这个问题,让我看起来像个假人,因为我花了很多时间却无济于事。 图一:盒子排列
/* Mobile First */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.main-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 10px;
}
.item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
flex: 1 1 100%;
}
.main-content>.item:nth-child(odd) {
background-color: orange;
}
.item:nth-child(even) {
background-color: lightseagreen;
}
/* Laptop Layout */
@media (min-width: 1024px) {
.main-content {
justify-content: space-between;
}
.item {
flex: 0 0 48%;
box-sizing: border-box;
}
/* help code goes here */
}
<div class="main-content">
<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>
我尝试使用“order”属性,它将偶数框翻转到顶部,将奇数框翻转到底部。您可以在图 2 中看到它是如何结束的。 图2:使用Order排列盒子,这不是我想要的
.item:nth-child(odd) {
order: 2;
}
.item:nth-child(even) {
order: 1;
}
我也尝试使用网格布局,但问题是我得到了不需要的间隙。您可以查看图 3,其中网格布局将赔率放在右侧,偶数放在左侧,但在第 1 号框之前有一个 空白。 图 3:使用网格布局进行框排列
.main-content {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 10px;
}
...
/* Laptop Layout */
@media (min-width: 1024px) {
.main-content {
grid-template-columns: 1fr 1fr;
}
.item:nth-child(odd) {
grid-column: 2;
}
.item:nth-child(even) {
grid-column: 1;
}
}
您只需添加
flex-direction: row-reverse
即可。见下文。
/* Mobile First */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.main-content {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: center;
gap: 10px;
padding: 10px;
}
.item {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
flex: 1 1 100%;
}
.main-content>.item:nth-child(odd) {
background-color: orange;
}
.item:nth-child(even) {
background-color: lightseagreen;
}
/* Laptop Layout */
@media (min-width: 1024px) {
.main-content {
justify-content: space-between;
}
.item {
flex: 0 0 48%;
box-sizing: border-box;
}
/* help code goes here */
}
<div class="main-content">
<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>