1 回答
TA贡献2012条经验 获得超12个赞
得益于出色的flexbox规范,这在CSS中是可行的。使用order和flex-flow属性,我们可以实现您想要的。无前缀的IE11和所有常绿浏览器将支持此功能。IE10前缀-ms-order,不支持flex-flow。
该解决方案考虑了您列出的所有约束:
将指定顺序的元素列表显示为一行。
如果窗口太小,请更改它们以显示在列中。
当元素在列中显示时,更改它们的顺序。
由于堆栈代码段的限制,您需要以整页模式查看演示,并调整浏览器的大小以查看效果。
.container div {
width: 100px;
height: 50px;
display: inline-block;
}
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
@media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column; }
.five { order: 1; }
.four { order: 2; }
.three { order: 3; }
.two { order: 4; }
.one { order: 5 }
}
<div class="container">
<div class="one">I'm first</div>
<div class="two">I'm second</div>
<div class="three">I'm third</div>
<div class="four">I'm fourth</div>
<div class="five">I'm fifth</div>
</div>
另外,这是一个JSFiddle演示。
如果您倾向于冗长的CSS,也可以在flex-flow: column-reverse不将order属性分配给每个div的情况下直接使用。相同的演示限制适用;全屏查看此演示并相应地调整浏览器窗口的大小。
.container div {
width: 100px;
height: 50px;
display: inline-block;
}
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
@media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column-reverse; }
}
<div class="container">
<div class="one">I'm first</div>
<div class="two">I'm second</div>
<div class="three">I'm third</div>
<div class="four">I'm fourth</div>
<div class="five">I'm fifth</div>
</div>
值得指出的是,这flex-flow
是同时包含flex-direction
和flex-wrap
属性的简写属性。
- 1 回答
- 0 关注
- 531 浏览
相关问题推荐
添加回答
举报