Question

我正在使用Jekyll建立一个网站，我正在使用一个flexbox模型，观众可以点击帖子，然后将它们带到文章页面。问题是我的网格设置为每行显示3个帖子，然后换行。默认情况下，第一个发布的帖子是您看到的第一个帖子，最新帖子最后结束，所以我尝试使用flexbox来反转这个帖子。

如果我在网站上只有7个帖子，那么最后一个帖子将在自己的一行上，有两个空格，所以如果我使用'wrap-reverse'，该帖子将是唯一的帖子在顶部行，这不是我想要的。我希望我的帖子显示为：[7,6,5 - 4,3,2 - 1]从左到右，而不是默认[1,2,3 - 4,5,6 - 7] ，其中7是最新的文章，1是最早的文章。

我正在寻找一种方法来以干净的方式安排我的帖子，这样当我上传新帖子时，它们会自动发布在网格布局的左上角。对不起，如果这听起来有点混乱。如果您有任何问题有助于理解我在说什么，请随时提出。

以下是来自codepen的一些代码，用于说明我的内容。 http://codepen.io/pen/?editors=110

<body>
  <div class="container">
    <div class='post'>1 (oldest post)</div>
    <div class='post'>2</div>
    <div class='post'>3</div>
    <div class='post'>4</div>
    <div class='post'>5</div>
    <div class='post'>6</div>
    <div class='post'>7 (newest post)</div>
  </div>
</body>

.container {
  display: flex;
  flex-wrap: wrap;
}

.post {
  height: 170px;
  width: 220px;
  background: black;
  color: orange;
  margin: 10px; 
  font-size: 24px;
  text-align: center;
}

我基本上想要7替换1,6替换2,5替换3等。谢谢你的帮助！

Answer 1

http://codepen.io/anon/pen/JYYqjK

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: space-around;
}

输出：

使用row-reverse。这会将行的方向更改为rtl。如果没有justify-content，这似乎会使元素正确浮动。通过添加justify-content。

来解决此问题

但是，最好的方法是一起更改HTML输出。如果您正在使用Wordpress或任何其他CMS，这应该非常简单。

正如Paulie_D指出的那样，这只有在没有包装的情况下才有效。您可以通过添加flex-wrap: wrap-reverse;但that will look a bit strange来部分解决此问题。

Answer 2

要使用Jekyll反转数组，您只需反向此数组顺序，默认情况下按日期排序：

<div class="container">
{% for post in site.posts reversed %}
  <div class='post'>{{post.title}}</div>
{% endfor %}
</div>

Answer 3

所以你想要逆向订单？看这里：http://codepen.io/01/pen/eppowq

修改

让我澄清一下，分配顺序本身就是一个简单可靠的解决方案，我只是建议JavaScript扩展这个主题。

您可以使用jQuery或JavaScript轻松操作order属性。

HTML

<body> <div class="container"> <div class='post' style="order:7">1 (oldest post)</div> <div class='post' style="order:6">2</div> <div class='post' style="order:5">3</div> <div class='post' style="order:4">4</div> <div class='post' style="order:3">5</div> <div class='post' style="order:2">6</div> <div class='post' style="order:1">7 (newest post)</div> </div> </body>

我做了一个随机重新排序弹性项目的演示：http://codepen.io/01/pen/BNbpLN

您可以将代码修改为您自己的设计。

如何使用flexbox首先显示最近的帖子？

3 个答案: