撤消项目新闻Feed的显示

Question

我想每小时从左到右保留元素box1的每个内部 每24小时一天，元素盒1，盒子2和盒子3将从底部向上...

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以上是我的代码.. 只能在盒子内预留＆＃34;从右到左＆＃34; 但是自下而上还没有......

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>