更改flex框宽度时flex项的顺序

Question

我有一个flex盒子，里面有弹性物品，每个都有一定的订单。

我想设置它，以便当弹性盒(而不是屏幕，等等)。变得比500px小，顺序改变(也可能是边距之一)。

下面是代码：

<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小于500 to (或任何指定的数量)时，我希望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>

​