我需要使用Flex更改移动设备整个页面的顺序.我可以在单个容器中使用它,但是可以在页面上使用所有容器吗？这是一个例子：
.outer {
display: flex;
flex-direction: column;
}
#a {
order: 4;
background: #ccc;
}
#b {
order: 1;
background: #aaa;
}
#c {
order: 3;
background: #d33;
}
.one {
order: 2;
background: #aaa;
}
.two {
order: 5;
background: #aaa;
}
<div class="outer">
<div id="flex">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>
<div id="flex2">
<div class="one">Show me 2nd</div>
<div class="two">Show me 5th</div>
</div>
</div>
“Show me 2nd”和“Show me 5th”只是坐在最后而不是新订单中.要确认,无法更改HTML.
解决方法
您不能对不共享同一容器的元素应用带有flex的订单：
The ‘order’ property controls the order in which flex items appear within their flex container,by assigning them to ordinal groups.
您可以更改HTML结构,因此所有元素将共享同一个容器,然后订单规则将起作用.
