Question

我需要使用Flex更改移动设备整个页面的顺序。我可以在单个容器中使用它，但是可以使用页面上的所有容器吗？这是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

给我看第二个＆＃39;并且＆＃39;显示第5个＆＃39;只是坐在最后而不是新秩序。要确认，HTML无法更改。

JsFiddle

Answer 1

您无法对不共享同一容器的元素应用flex订单：

＆＃39;命令＆＃39;属性控制弹性项目在其弹性容器中的显示顺序，方法是将它们分配给顺序组。

Soucre

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

Answer 2

通过jquery，您可以使用clone()和remove()直到display:contents达到标准。

实际上usable in Firefox用于测试目的(fiddle)。

＆＃13;

$('#flex2 > div, #flex  > div').clone().insertAfter('#flex2');
$('#flex2 , #flex').remove();

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

使用CSS flexbox重新排序整个页面

2 个答案: