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

我正在使用Jekyll建立一个网站，我使用的是一个flexbox模型，在这个模型中，观众可以点击一个帖子，并将它带到文章页面。问题是我的网格设置为每行显示3个帖子，然后换行。默认情况下，第一个发布的文章是您看到的第一篇文章，而最新的文章最终结束，所以我试图使用flexbox来反转这一点。如何使用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等感谢您的帮助！

来源

2015-09-12 Tre

你的笔是空白的？ – zer00ne

Flex-direction：row/column-reverse – Akxe

不幸的是，'flexbox'并没有真正提供你正在寻找的那种“magic bullet”。真正的解决方案是调整Jekyll以最近的顺序发布。 –

要扭转与杰奇数组你只可以扭转这个数组顺序，其中，默认情况下，是按日期排序：

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

来源

2015-09-12 21:39:42

刚刚*有*为此在Jekyll中设置。 +1 –

这正是我所期待的。谢谢大卫 – Tre

所以你想要逆序？看看这里：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

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

来源

2015-09-12 20:50:14 zer00ne

我会高度反对这个，因为它可以用CSS实现，如果使用JavaScript，它应该颠倒顺序本身。 – Akxe

@Akxe我建议你只用CSS提交一个解决方案，我想看看它。顺便说一句，我建议这是因为OP不想'wrap-reverse'。我在他面前设置的解决方案是CSS，它是'订单'。 – zer00ne

@ zer00ne这绝对有用，但它需要额外的代码。感谢您的建议！ – Tre

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部分解决此问题。

来源

2015-09-12 21:01:42

不起作用... 7虽然靠近，但并不是第一次。 –

@Paulie_D你是什么意思？我添加了一个截图。 –

不在包装时发生...检查出来。 –

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

回答

相关问题