如何使用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首先顯示最近的帖子？

回答

相關問題