html – 在不使用媒体查询的情况下,是否可以在换行时更改d性项目的顺序？

概述我有一个flex容器,在普通屏幕上并排显示两个div. [div1] [div2] 当它们包裹在较小的设备上时,最终会变为 [div1][div2] 我想要的是让他们出现 [div2][div1] 如果使用媒体查询,这是微不足道的,但我有一个非常动态的布局,这使得这是不可行的,我使用d性框的全部原因是试图避免繁琐/无法获得的媒体查询. 是否有一些灵活的flex CSS属性组合可以提供我想要的 我有一个flex容器,在普通屏幕上并排显示两个div.

[div1]  [div2]

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

[div1][div2]

我想要的是让他们出现

[div2][div1]

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

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

解决方法 事实证明这很简单.只需使用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}

总结

以上是内存溢出为你收集整理的html – 在不使用媒体查询的情况下,是否可以在换行时更改d性项目的顺序？全部内容，希望文章能够帮你解决html – 在不使用媒体查询的情况下,是否可以在换行时更改d性项目的顺序？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。