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

4lackof 发表于 Dev

4缺乏

我有一个弹性包装盒，里面装有弹性物品，每个物品都有一定的顺序。

我想对其进行设置，以便当伸缩框（而不是屏幕等）变得小于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小于500像素（或任何指定的数量）时，我想flex-item-3更改为：

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

（我注释掉，margin-left: auto;所以注意到它已被取出）

我知道，@media queries但是我不确定在这种情况下如何使用它们。

有谁知道只要包含框的宽度小于特定宽度，如何更改CSS样式？（最好使用CSS解决方案，但可以使用JS / jQuery）

瑞奇

如您所说，使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。