Flexbox等高（不同大小的內容）不起作用

-1

我正在嘗試使用Flexbox創建網格來在我的主頁上輸出WordPress最新帖子。但是由於每個框內的內容不同，每個框的高度並不相同，並且會產生問題。我嘗試使用align-item = justify和其他一些推薦的選項，但似乎沒有任何工作。Flexbox等高（不同大小的內容）不起作用

這裏是我使用的CSS：

.home-latest-posts { 
     display: flex; 
     flex-wrap: wrap; 
} 
.home-latest-posts .post { 
    background: #fff none repeat scroll 0 0; 
    display: inline-flex; 
    flex-direction: column; 
    margin: 0; 
    width: 32%; 
} 
.home-latest-posts .post:nth-child(3n+2) { 
    margin-left: 2%; 
    margin-right: 2%; 
} 
.home-latest-posts .post .entry-title { 
    padding: 1em 3em 0.5em; 
} 
.home-latest-posts .post .entry-content { 
padding: 0 3em 1em; 
}

然而，由於可能存在可能干擾其他代碼，我會鏈接到實際的頁面，讓你們可以得到全貌。

您可以在此測試網站（http://moneyrope.com/）中看到我遇到的問題。這是「最新的錢提示」下的部分。

對不起。這只是一個測試網站。

來源

2017-01-15 satrap

添加這部分

.widget-wrap { 
    display: flex; 
    flex-wrap: wrap; 
} 
.home-latest-posts .post { 
    margin-bottom: 3rem; 
}

不要忘記prefix所有的代碼。您還應該考慮將其包裝在min-width @media查詢

來源

2017-01-16 01:19:54

非常感謝您花時間提供幫助。我添加了您提供的代碼。它有點作品，但它以某種方式使最後一個盒子的高度比其他盒子高！？任何幫助，將不勝感激。 – satrap

順便說一句，感謝您對前綴和鏈接的建議。我會確保這樣做。再次感謝。 – satrap

它不應該使最後一個項目更高，我不能再現你描述的問題。很可能，CSS中的其他內容會干涉。無法觀察它，我無法修復它。請提供一個工作示例。 –

Flexbox等高（不同大小的內容）不起作用

回答

相關問題