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

我正在使用Jekyll建立一个网站，我正在使用flexbox模型，在那里，观众可以点击一篇文章，它将把他们带到文章页面。问题是我的网格设置为每行显示3篇文章，然后换行。默认情况下，第一篇发布的文章是您看到的第一篇文章，而最新的文章则以结尾，因此我尝试使用flexbox来扭转这种情况

如果我在网站上只有7篇文章，那么最后一篇文章将在自己的一行上，有两个空格，因此如果我使用“反向换行”，那篇文章将是最上面一行的唯一文章，这不是我想要的。我希望我的帖子从左到右显示为：[7,6,5-4,3,2-1]，而不是默认的[1,2,3-4,5,6-7]，其中7是最新的文章，1是最老的文章

我正在寻找一种可能的方法来以干净的方式安排我的帖子，这样当我上传新帖子时，它们会自动发布在网格布局的左上角。很抱歉，这可能听起来很混乱。如果你有任何有助于理解我所说内容的问题，请随时提问

下面是一些代码笔的代码，说明了我所拥有的。

我基本上想要7代替1，6代替2，5代替3，等等。

---

谢谢你的帮助

那么你想要相反的顺序？看这里：

编辑

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

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

HTML

我制作了一个演示，随机重新排序flex项目：

---

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

那么你想要相反的顺序？看这里：

编辑

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

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

HTML

我制作了一个演示，随机重新排序flex项目：

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

输出：

使用行反转。这会将行的方向更改为rtl。如果没有“证明内容合理”，这似乎会使元素正确浮动。通过添加justify内容来解决这个问题

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

正如Paulie_D所指出的，这只在没有包装的情况下才有效。您可以通过添加flex wrap:wrap reverse部分解决此问题；但是

输出：

使用行反转。这会将行的方向更改为rtl。如果没有“证明内容合理”，这似乎会使元素正确浮动。通过添加justify内容来解决这个问题

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

---

正如Paulie_D所指出的，这只在没有包装的情况下才有效。您可以通过添加flex wrap:wrap reverse部分解决此问题；但是。

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

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

---

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

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

---

Flex-direction：行/列反转幸运的是，flexbox并没有真正提供您想要的那种神奇的子弹。真正的解决办法是调整Jekyll以最新的顺序发布。有人看过我的答案吗？它错了吗？错了，没有…但是OP还没有响应。也许是一个？Flex方向：行/列反转幸运的是，flexbox并没有提供你想要的那种神奇的子弹。真正的解决办法是调整Jekyll以最新的顺序发布。有人看过我的答案吗？错了吗？错了，没有…但是OP还没有回应。也许a？我强烈反对，因为这是可以通过css实现的，如果使用JavaScript，它应该颠倒顺序。@Akxe我建议你只在那时提交一个使用css的解决方案，我想看看。顺便说一句，我建议这样做是因为OP不想要反向包装。我在他面前设置的解决方案是CSS，它的顺序。@zer00ne这肯定有效，但它需要太多额外的代码。谢谢你的建议！如果您计划一次显示10篇以上的文章，那么标记将非常麻烦。我强烈反对这种做法，因为使用css可以实现这一点，如果使用JavaScript，则应该颠倒顺序。@Akxe我建议您仅在那时提交一个使用css的解决方案，我希望看到它。顺便说一句，我建议这样做是因为OP不想要反向包装。我在他面前设置的解决方案是CSS，它的顺序。@zer00ne这肯定有效，但它需要太多额外的代码。谢谢你的建议！如果您计划一次显示10篇以上的文章，那么标记将很麻烦。不起作用…7不是第一个，尽管您是

---

接近。@Paulie\D你什么意思？我添加了一个屏幕截图。不是在包装的时候…看看。@Paulie\u你是对的。我添加了一个更新。不过，我不知道如何去除顶部令人讨厌的空白。谢谢你的建议，但我肯定需要将网格包装起来。大卫在杰基尔身上找到了一个修复程序！不起作用……虽然你很接近，但7不是第一个。@Paulie\u D你是什么意思？我添加了一个屏幕截图。不是在包装的时候…看看。@Paulie\u你是对的。我添加了一个更新。不过，我不知道如何去除顶部令人讨厌的空白。谢谢你的建议，但我肯定需要将网格包装起来。大卫在杰基尔身上找到了一个修复程序！在杰基尔一定有这样的背景+1这正是我要找的。谢谢你，戴维特，这件事在杰基尔得有个背景+1这正是我要找的。谢谢大卫

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

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