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

Posted 2023-03-05

【中文标题】调整屏幕大小时如何重新排序弹性项目？

【英文标题】：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>

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

【参考方案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>

【讨论】：

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