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

时间:2016-12-14 11:21:20

标签: html css flexbox

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

[div1]  [div2]

当它们包裹在较小的设备上时,最终会以

结束
[div1]
[div2]

我想要的是它们显示为

[div2]
[div1]

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

是否有一些灵活的flex CSS属性组合可以提供我想要的行为?我已经玩了很多但没有成功,但觉得这必须是一个相对常见的CSS'想要',所以希望有人能在几秒钟内回答这个问题!

3 个答案:

答案 0 :(得分:2)

事实证明这很简单。只需使用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}

答案 1 :(得分:1)

我遇到了完全相同的问题,无论是否包装,我都在flex-direction的控制下苦苦挣扎。事实证明,flex-wrap具有一个wrap-reverse选项,可以完全满足您的需求:https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

答案 2 :(得分:0)

您可以查看flex-directionorder

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>

使用的codepen:http://codepen.io/anon/pen/RoeOrv