伸缩框宽度更改时更改伸缩项目的顺序

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>