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

问题描述

我需要使用 Flex 为移动设备更改整个页面的顺序.我可以在单个容器内进行此操作，但是是否可以对页面上的所有容器进行此操作?下面是一个例子:

.outer {显示:弹性；弹性方向:列；}#一个 {订单:4；背景:#ccc;}#b {订单:1；背景:#aaa;}#C {订单:3；背景:#d33；}.一 {订单:2；背景:#aaa;}.二 {订单:5；背景:#aaa;}

<div id="flex"><div id="a">A</div><div id="b">B</div><div id="c">C</div>
<div id="flex2"><div class="one">显示第二个</div><div class="two">给我看第 5 个</div>

'Show me 2nd' 和'Show me 5th' 只是坐在最后而不是新的顺序.确认一下，HTML 无法更改.

JsFiddle

解决方案

你不能对不共享同一个容器的元素应用带有 flex 的订单:

<块引用>

'order' 属性通过将它们分配给序号组来控制 flex 项在其 flex 容器中出现的顺序.

Soucre

您可以更改 HTML 结构，这样所有元素将共享同一个容器，然后顺序规则将起作用.

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>

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

解决方案

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

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

Soucre

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屋！