调整屏幕大小时如何重新排序弹性项目？答案

【问题标题】：How to reorder the flex items when resizing the screen?调整屏幕大小时如何重新排序弹性项目？
【发布时间】：2019-08-28 14:57:16
【问题描述】：

通过使用媒体查询和弹性框，我只能重新排列第二行内容的顺序。我想将顺序从第一行切换到第二行，但我找不到解决方案。

我尝试更改不同的订单号，但完全没有效果。

.item {
  width: 99%;
  height: 200px;
  background-color: blueviolet;
  display: flex;
}

.item1 {
  background-color: blue;
  width: 33%;
  height: 200px;
}

.item2 {
  background-color: cyan;
  width: 33%;
  height: 200px;
}

.item3 {
  background-color: red;
  width: 33%;
  height: 200px;
}

@media screen and (max-width: 500px) {
  div#item {
    order: 0
  }
  div#item1 {
    order: 3
  }
  div#item2 {
    order: 4
  }
  div#item3 {
    order: 1
  }
}

<div class="item" id="item"></div>
<div style="display: flex">
  <div class="item1" id="item1"></div>
  <div class="item2" id="item2"></div>
  <div class="item3" id="item3"></div>
</div>

调整屏幕大小时，我想更改两行之间的顺序。例如，在调整屏幕大小时，紫色和蓝色会相互改变位置。怎么办？

【问题讨论】：

标签： html css flexbox media-queries

【解决方案1】：

只需为所有元素考虑一个 flexbox 容器，如下所示：

.container {
  display: flex;
  flex-wrap: wrap;
}

.container  > * {
  height: 100px;

}

.item {
  width: 100%;
  background-color: blueviolet;
}

.item1 {
  background-color: blue;
  width: calc(100%/3);
}

.item2 {
  background-color: cyan;
  width: calc(100%/3);
}

.item3 {
  background-color: red;
  width: calc(100%/3);
}

@media screen and (max-width: 500px) {
  .container > div {
    width:100%;
  }
  
  div.item {
    order: 2
  }
  div.item1 {
    order: 3
  }
  div.item2 {
    order: 4
  }
  div.item3 {
    order: 1
  }
}

<div class="container">
  <div class="item"></div>
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>

【讨论】：

【解决方案2】：

第一行和第二行是不同的弹性盒 - 您可以将item 包装到第二行的容器中，并使用flex-wrap: wrap 使用包装弹性盒。第一行填满后，如果行中没有剩余空间，flex 项 会下降到下一行。

尝试为下面的第一行更改order：

.wrapper {
  display: flex; /* flexbox container */
  flex-wrap: wrap; /* wrap the flexbox */
}

.item {
  width: 99%;
  height: 200px;
  background-color: blueviolet;
  display: flex;
}

.item1 {
  background-color: blue;
  width: 33%;
  height: 200px;
}

.item2 {
  background-color: cyan;
  width: 33%;
  height: 200px;
}

.item3 {
  background-color: red;
  width: 33%;
  height: 200px;
}

@media screen and (max-width: 500px) {
  div#item {
    order: 5; /* see changed order below 500px */
  }
  div#item1 {
    order: 3;
  }
  div#item2 {
    order: 4;
  }
  div#item3 {
    order: 1;
  }
}

<div class="wrapper">
  <div class="item" id="item"></div>
  <div class="item1" id="item1"></div>
  <div class="item2" id="item2"></div>
  <div class="item3" id="item3"></div>
</div>

【讨论】：

非常感谢，这非常有效。感谢您的帮助，先生。