Entfernen einer großen Lücke zwischen Zeilen im Flexbox-Layout

Question

Ich habe eine Sidebar, die länger ist als der Inhalt (Post-Vorschau mit Miniaturansichten).

Ich benutze Flexbox, um das Layout zu erstellen, und wenn die Seitenleiste länger als die Vorschau ist, gibt es eine große Lücke dazwischen.

Ich möchte, dass jede Reihe keine Lücke dazwischen hat, wie es wäre, wenn die Seitenleiste schön und kurz wäre.

Ich habe eine codepen zusammengeworfen.

//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

Eine anfängliche Einstellung eines Flex-Containers ist align-content: stretch.

Dies bedeutet, dass sich mehrere Linien in einem Flex-Container ausdehnen, um die Länge (in diesem Fall die Höhe) des Containers abzudecken.

Die Seitenleiste vergrößert die Höhe des Containers, sodass sich der Inhalt der Miniaturansicht über einen größeren Bereich verteilt.

Sie können dieses Standardverhalten mit align-content: flex-start überschreiben.

.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