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

Posted 2023-03-05

【中文标题】当弹性框宽度改变时改变弹性项目的顺序

【英文标题】：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 元素，所以它占据了所有元素

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