javascript - 当 flexbox 宽度改变时改变 flex 元素的顺序

Question

我有一个 flex 盒子，里面有 flex 元素，每个元素都有一定的顺序。

我想设置它，以便当 flexbox (不是屏幕等)小于 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 查询，但我不确定它们在这种情况下如何应用。

有谁知道当包含框小于特定宽度时如何更改 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>