是否可以在不使用媒体查询的情况下更改 flex 项目的包装顺序？答案

【问题标题】：Is it possible to change the order of flex items when they wrap, without using a media query?是否可以在不使用媒体查询的情况下更改 flex 项目的包装顺序？
【发布时间】：2017-04-29 16:57:59
【问题描述】：

我有一个 flex 容器，它在普通屏幕上并排显示两个 div。

[div1]  [div2]

当它们包装在较小的设备上时，最终结果为

[div1]
[div2]

我想要的是让他们显示为

[div2]
[div1]

如果使用媒体查询，这是微不足道的，但我有一个非常动态的布局，这使得它不可行，而我使用弹性框的全部原因是尽量避免繁琐/无法实现的媒体查询。

是否有一些 flex CSS 属性的神奇组合可以提供我想要的行为？玩了好一阵子都没有成功，感觉这应该是比较常见的 CSS 'want'，所以希望这里有人能在几秒内回答这个问题！

【问题讨论】：

标签： html css flexbox

【解决方案1】：

事实证明，这相当简单。只需使用flex-direction:row-reverse;

https://jsfiddle.net/gveukj1j/

HTML：

<div id="container">
  <div id="div2">
      Div 2
  </div>
  <div id="div1">
      Div 1
  </div>
</div>

CSS：

/* the relevant CSS */

#container{display:flex;flex-wrap:wrap;flex-direction:row-reverse}
#container>div{flex-basis:400px;flex-shrink:0}

/* CSS to make the demo clear */

#container>div{line-height:200px;height:200px;color:#fff;text-align:center}
#div1{background:blue}
#div2{background:red}

【讨论】：

【解决方案2】：

我遇到了完全相同的问题，并且在flex-direction 控制订单方面苦苦挣扎，无论是否包装。原来flex-wrap 有一个wrap-reverse 选项，在这种情况下完全符合您的要求：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

【讨论】：

【解决方案3】：

你可以看看flex-direction和order：

body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
div {
  flex: 1;
  /* give them a size */
  min-width: 400px;
  border: solid;
  padding: 1em;
}
.a {
  order: 1
}
.b {
  order: 0
}

<div class="a">a</div>
<div class="b">b</div>

要玩的代码笔：http://codepen.io/anon/pen/RoeOrv

【讨论】：