如何用奇数橙色框翻转偶数绿色框？

Question

我正在使用移动优先的方法构建网站布局，然后使用媒体查询获取笔记本电脑宽度：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;
    }
}

Answer 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>