フレックスボックスレイアウトの行間の大きな隙間を削除する

Question

コンテンツよりも長いサイドバーが表示されています（プレビューのサムネイルが表示されます）。

フレックスボックスを使用してレイアウトを構築しています。サイドバーがプレビューよりも長い場合は、その間に大きなギャップがあります。

サイドバーが素晴らしく短かった場合と同じように、各行の間にギャップがないようにしたいと思います。

私は一緒に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です。

これは、フレックスコンテナの複数の線が、コンテナの長さ（この場合は高さ）をカバーするように拡大することを意味します。

サイドバーがコンテナの高さを上げているため、サムネイルのコンテンツが背の高い領域に分散してしまいます。

この既定の動作は、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