当弹性框宽度改变时改变弹性项目的顺序答案

【问题标题】：Change order of flex items when flex box width changes当弹性框宽度改变时改变弹性项目的顺序
【发布时间】：2016-12-12 03:26:05
【问题描述】：

我有一个弹性盒子，里面有弹性项目，每个项目都有一定的顺序。

我想设置它，以便当弹性框（不是屏幕等）变得小于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）

【问题讨论】：

父元素的大小如何与窗口宽度相关？
@Shaggy 它是一个带有display: flex; 的 div 元素，所以它占据了所有元素

标签： javascript jquery html css flexbox

【解决方案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>

【讨论】：