伸縮框寬度更改時更改伸縮項目的順序

Question

我有一個彈性盒，里面有彈性項目，每個項目都有一定順序。

我想進行設置，以便當柔韌性框（而不是屏幕等）小於500px ，順序會發生變化（也可能是邊距之一）。

這是代碼：

的HTML

<div class="flex-box">
  <div class="flex-item-0"></div>
  <div class="flex-item-0"></div>
  <div class="flex-item-0"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>

的CSS

.flex-box{
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}
.flex-item-0{
  order: 0;
}
.flex-item-2{
  order: 2;
}
.flex-item-3{
  order: 3;
  margin-left: auto;
}

當flex-box小於500px（或任何指定的數量）時，我希望flex-item-3更改為：

.flex-item-3{
  order: 1;
  /*margin-left: auto;*/
}

（我注釋掉了margin-left: auto;所以它已經被取出了）

我知道有@media queries但是我不確定它們在這種情況下如何應用。

有誰知道只要包含框的寬度小於特定寬度，如何更改CSS樣式？ （首選CSS解決方案，但可以使用JS / jQuery）

Answer 1

如您所說，使用CSS，您可以使用媒體查詢。

在這種情況下，您將使用：

@media (max-width:500px) {
  .flex-item-3 {
    order: 1;
    margin-left: initial;
  }
}

---

代碼片段：

 .flex-box { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; /*---Demo---*/ margin-top: 40px; border: 1px solid #262626; /*---Demo---*/ } .flex-item-0 { order: 0; } .flex-item-2 { order: 2; } .flex-item-3 { order: 3; margin-left: auto; /*---Demo---*/ font-weight: bold; background-color: tomato; /*---Demo---*/ } @media (max-width: 500px) { .flex-item-3 { order: 1; margin-left: initial; } } 

 <div class="flex-box"> <div class="flex-item-0">0</div> <div class="flex-item-0">0</div> <div class="flex-item-0">0</div> <div class="flex-item-2">2</div> <div class="flex-item-2">2</div> <div class="flex-item-3">3</div> </div>