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

Question

我正在使用 Jekyll 建立一个网站，我正在使用一个 flexbox 模型，观众可以在其中单击 post 并将他们带到文章页面。问题是我的网格设置为每行显示 3 posts，然后换行。默认情况下，第一个发布的 post 是你看到的第一个 post，最新的 post 排在最后，所以我尝试使用 flexbox 来扭转这种情况。

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

我正在寻找一种可能的方法来以干净的方式排列我的 post，这样当我上传新的 post 时，它们会自动发布在网格布局的左上角.对不起，如果这听起来令人困惑。如果您有任何有助于理解我在说什么的问题，请随时提问。

这是 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/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>

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

您可以根据自己的设计修改代码。

Answer 2

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 3

要使用 Jekyll 反转数组，您只需反转这个数组顺序，默认情况下，它是按日期排序的：

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

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

How to use flexbox to show most recent posts first?

css

jekyll

flexbox