javascript - 反转元素的显示 News Feed

Question

我想每小时从右到左保留元素 box1 的每个内部每隔 24 小时/一天，元素 box1、box2 和 box 3 将从底部向上..

.box {
  display: flex;
  flex-direction: row;
}
.box :nth-child(1) { order: 4; }
.box :nth-child(2) { order: 1; }
.box :nth-child(3) { order: 2; }
.box :nth-child(4) { order: 3; }

<div class="box" id="box1">
  <div><a href="#">One</a></div>
  <div><a href="#">Two</a></div>
  <div><a href="#">Three</a></div>
  <div><a href="#">Four</a></div>
</div>
<div class="box" id="box2">
  <div><a href="#">One</a></div>
  <div><a href="#">Two</a></div>
  <div><a href="#">Three</a></div>
  <div><a href="#">Four</a></div>
</div>
<div class="box" id="box3">
  <div><a href="#">One</a></div>
  <div><a href="#">Two</a></div>
  <div><a href="#">Three</a></div>
  <div><a href="#">Four</a></div>
</div>
<div class="box" id="box4">
  <div><a href="#">One</a></div>
  <div><a href="#">Two</a></div>
  <div><a href="#">Three</a></div>
  <div><a href="#">Four</a></div>
</div>

上面是我的代码..只能在框内保留“从右到左”但是从下到上还没有..

Answer 1

您可以按照对一行中的元素重新排序的方式对整行进行重新排序。在容器元素上应用 display: flex;，但这次设置 flex-direction: column;。现在您可以使用 order 属性重新排序行:

.box {
  display: flex;
  flex-direction: row;
}
.box :nth-child(1) { order: 4; }
.box :nth-child(2) { order: 1; }
.box :nth-child(3) { order: 2; }
.box :nth-child(4) { order: 3; }

.container {
  display: flex;
  flex-direction: column;
}
.container :nth-child(1) { order: 4; }
.container :nth-child(2) { order: 1; }
.container :nth-child(3) { order: 2; }
.container :nth-child(4) { order: 3; }

<div class="container">
  <div class="box" id="box1">
    <div><a href="#">1 One</a></div>
    <div><a href="#">1 Two</a></div>
    <div><a href="#">1 Three</a></div>
    <div><a href="#">1 Four</a></div>
  </div>
  <div class="box" id="box2">
    <div><a href="#">2 One</a></div>
    <div><a href="#">2 Two</a></div>
    <div><a href="#">2 Three</a></div>
    <div><a href="#">2 Four</a></div>
  </div>
  <div class="box" id="box3">
    <div><a href="#">3 One</a></div>
    <div><a href="#">3 Two</a></div>
    <div><a href="#">3 Three</a></div>
    <div><a href="#">3 Four</a></div>
  </div>
  <div class="box" id="box4">
    <div><a href="#">4 One</a></div>
    <div><a href="#">4 Two</a></div>
    <div><a href="#">4 Three</a></div>
    <div><a href="#">4 Four</a></div>
  </div>
</div>