Können Flexbox-Produkte lieber gewickelt werden, anstatt ihren Container zu erweitern?

Question

Ich erstelle ein kartenartiges Layout, in dem einzelne Karten vertikal gestapelt werden. Bei höheren Bildschirmbreiten werden immer mehr Kartenspalten verwendet - mit möglichst wenig vertikalem Platzbedarf.

Ich verwende ein flex-flow: column wrap Layout, um dies zu tun. Was ich jedoch finde, ist, dass der Behälter eine height oder max-height haben muss, um die Karten zum Umwickeln zu ermutigen. Angesichts der Tatsache, dass sich die Anzahl der Karten und ihre individuelle Größe ändern können, kann ich nicht sagen, wie hoch diese Höhe sein wird, ohne Gegenstände abzuschneiden oder zu viel Platz darunter zu haben.

Kann mir jemand sagen, ob das möglich ist oder ob ich etwas falsch mache?

Snippet angehängt.

.card-container { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-items: stretch; 
 
} 
 
.card { 
 
    flex: 0 0 auto; 
 
    width: 15rem; 
 
    margin: 0.5rem; 
 
    background-color: #f4f4f4; 
 
    /* max-height: ??? */ 
 
}

<div class="card-container"> 
 
    <div class="card" style="height: 20em"></div> 
 
    <div class="card" style="height: 17em"></div> 
 
    <div class="card" style="height: 5em"></div> 
 
    <div class="card" style="height: 10em"></div> 
 
    <div class="card" style="height: 21em"></div> 
 
    <div class="card" style="height: 10em"></div> 
 
    <div class="card" style="height: 17em"></div> 
 
    <div class="card" style="height: 8em"></div> 
 
    <div class="card" style="height: 20em"></div> 
 
    <div class="card" style="height: 16em"></div> 
 
    <div class="card" style="height: 19em"></div> 
 
    <div class="card" style="height: 10em"></div> 
 
    <div class="card" style="height: 5em"></div> 
 
</div>

Answer 1

dies zu erreichen, müssen Sie max-height für den Flex Behälter setzen, nicht flex Produkte, weil Sie die flexiblen Elemente in Spalten und erhöhen die Spalten für größere Bildschirme ausgerichtet werden und Sie wollen nicht die flex Elemente in der Größe zu ändern, so setzen Sie diesen relativen Wert für die flex-Container:

.card-container { 
    max-height: 100vh 
} 

Fügen Sie diese auf den flexiblen Behälter. Hier ist "vh" eine relative Einheit, die für "Viewport Height" steht. 1 vh = 1% der Höhe des Ansichtsfensters. Viewport = die Größe des Browserfensters. Wenn das Ansichtsfenster 50 cm hoch ist, ist 1 vh = 0,5 cm.

Also egal wie breit der Bildschirm ist, wie viele Karten Sie einfügen, wie groß die Karten sein werden, werden mehrere Spalten verwendet, wenn die Höhe des Inhalts größer ist als die Höhe des Ansichtsfensters.

Dadurch werden auch horizontale Bildlaufleisten in Anzeigen erstellt, die auf schmalere Breiten als der Inhalt eingestellt sind. Wenn die Bildlaufleisten nicht angezeigt werden sollen, kann dies mit Medienabfragen behoben werden.