刪除flexbox佈局中的行之間的大差距

Question

我有一個比內容長的邊欄（使用縮略圖發佈預覽）。

我使用flexbox構建佈局，當側邊欄比預覽長時，它們之間存在巨大差距。

我希望每一行之間沒有差距，因爲如果側邊欄不錯又短。

我扔在一起codepen。

//page wrapper for sidebar 
.flexPageWrapper { 
    display:flex; 
    /* Centering the page */ 
    max-width:1500px; 
    margin:0 auto; 
} 
//search results flexbox container 
.searchContentWrap { 
    flex-grow: 1; 
    display: flex; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    margin-right: 1em; 
    flex-direction: row; 
} 

Answer 1

柔性容器的初始設置是align-content: stretch。

這意味着flex容器中的多行將擴展以覆蓋容器的長度（在此情況下爲高度）。

邊欄增加了容器的高度，導致縮略圖內容分佈在較高的空間上。

您可以用align-content: flex-start覆蓋此默認行爲。

.searchContentWrap { 
    flex-grow: 1; 
    display: flex; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    margin-right: 1em; 
    flex-direction: row; 
    align-content: flex-start; /* NEW */ 
} 

Revised Codepen