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

前端之家收集整理的这篇文章主要介绍了使用CSS flexbox重新排序整个页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要使用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.

JsFiddle

解决方法

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

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

Soucre

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

原文链接:https://www.f2er.com/css/217693.html

猜你在找的CSS相关文章