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;
  }
}

CODE SNIPPET

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

弹性框宽度更改时更改弹性项目的顺序

1 个答案: