使用CSS flexbox重新排序整个页面 [英] Re-order entire page with CSS flexbox

问题描述

我需要使用Flex更改移动设备的整个网页的顺序。我可以得到这个工作在单个容器内，但是是否可以做到与页面上的所有容器？下面是一个例子：

I need to change the order of my entire page for mobile devices, using Flex. I can get this working inside the individual container, but is it possible to do it with all containers on the page? Here is an example:

.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>

我第二次'和'显示我第五'只是坐在结束而不是在新的顺序。要确认，无法更改HTML。

The 'Show me 2nd' and 'Show me 5th' just sit at the end rather than in the new order. To confirm, the HTML can't be changed.

JsFiddle

推荐答案

不能对不共享同一容器的元素应用flex命令： / p>

You can't apply an order with flex on elements that don't share the same container:

'order'属性通过将flex项目分配到序数组来控制flex项目在flex容器中的显示顺序。

The 'order' property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.

Soucre

您可以更改HTML结构，所有元素将共享同一个容器，然后订单规则工作。

You can change your HTML structure, so all the elements will share the same container, and then the order rule will work.

这篇关于使用CSS flexbox重新排序整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！