如何重新排序CSSFlexbox-有解無憂

我有一個帶有 flex-direction: row 和 n 個專案的 flex 容器，它們沒有固定的高度或寬度。在桌面上，我顯示 2 列的確切順序。在移動設備上它是一列，但順序不是我想要的。基本上我想在第一列的專案之后顯示第二列的專案。如何對它們進行重新排序以達到預期的結果？這是一個例子。

在桌面兩列

item1   item2
item3   item4
item5   item6

一列所需的結果

item1
item3
item5
item2
item4
item6

這是一個html和css

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 50%;
}

@media only screen and (max-width: 520px) {
  .item {
    flex: 100%;
  }
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
</div>

uj5u.com熱心網友回復：

只需添加這個

  .item:nth-child(2n - 1) {
    order: -1;
  }

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 50%;
}

@media only screen and (max-width: 520px) {
  .item {
    flex: 100%;
  }

  .item:nth-child(2n - 1) {
    order: -1;
  }
}

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
  <div class="item">item6</div>
</div>

uj5u.com熱心網友回復：

您可以為此使用flex和order：

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  width: 50%;
  padding-bottom: 20px;
}

@media screen and (max-width: 800px) {
  .container {
    flex-direction: column;
  }
  .item {
    width: 100%;
  }
  .item3 {
    order: 2;
  }
  .item5 {
    order: 3;
  }
  .item2 {
    order: 4;
  }
  .item4 {
    order: 5;
  }
  .item6 {
    order: 6;
  }
}

<div class="container">
  <div class="item item1">item1</div>
  <div class="item item2">item2</div>
  <div class="item item3">item3</div>
  <div class="item item4">item4</div>
  <div class="item item5">item5</div>
  <div class="item item6">item6</div>
</div>

uj5u.com熱心網友回復：

您可以將該order屬性與 flexbox 一起使用。這是資源 => https://developer.mozilla.org/en-US/docs/Web/CSS/order

@media (max-width: 520px) {
  .item:nth-child(1) {
     order: 1;
  }
  
  .item:nth-child(2) {
     order: 4;
  }

  .item:nth-child(3) {
     order: 2;
  }

  .item:nth-child(4) {
     order: 5;
  }

  .item:nth-child(5) {
     order: 3;
  }

  .item:nth-child(6) {
     order: 6;
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/445002.html

標籤：html css 弹性盒

上一篇：如何在所有影像中間放置一個播放按鈕

下一篇：角度如何凍結墊表