是否可以在不使用媒体查询的情况下更改弹性项目在包装时的顺序?

Question

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

[div1]  [div2]

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

[div1]
[div2]

我想要的是让它们显示为

[div2]
[div1]

如果使用媒体查询完成，这是微不足道的，但我有一个非常动态的布局，这使得它不可行，我使用 flex box 的全部原因是尽量避免乏味/无法保留的媒体查询。

是否有一些 flex CSS 属性的神奇组合可以给我我想要的行为？ 我已经玩了很多都没有成功，但觉得这一定是一个相对常见的 CSS "想要"，所以希望这里有人可以在几秒钟内回答这个问题！

Answer 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}

Answer 2

我遇到了完全相同的问题，并且无论是否包装，都在努力flex-direction控制订单。 事实证明，flex-wrap有一个wrap-reverse选项，在这种情况下可以完全按照您的要求执行：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

Answer 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