Bearbeiten Im Gegensatz The difference between flex:1 and flex-grow:1. Während die Antwort letztlich die Verwendung von flex anstelle von flex-grow war, war meine Frage nicht der Unterschied zwischen den beiden, sondern eher, wie geschachtelte Flex-Boxen zum richtigen Wickeln gebracht werden können. Für jemanden, der mit diesem Problem zu kämpfen hat, gibt es keine Möglichkeit, diese Antwort auf SO zu finden, ohne bereits zu wissen, dass das Problem die Verwendung von Flex gegenüber Flex-Grow war. Wenn ich bereits wüsste, dass das Problem der Unterschied zwischen Flex und Flex-Grow war, hätte ich die Frage nicht stellen müssen.Verschachtelte Flex-Box Verpackung Ausgabe
Edit 2 Wenn Sie diesen Beitrag als Duplikat gekennzeichnet werden wird, wäre es besser, sie aufzulisten als Duplikat von Nested column flexbox inside row flexbox with wrapping anstelle der Differenz zwischen flex: 1 und biegen wachsen: 1.
Ich habe eine Reihe von div Tags, die als display:flex definiert sind. Sie sind als eine Reihe mit 3 Spalten ausgelegt. Die ersten beiden Spalten erhalten eine Breite und die dritte Spalte darf sich ausdehnen, um den Rest des Platzes zu füllen. Die Zeile wird auch so umbrochen, dass die dritte Spalte bei kleineren Bildschirmen unter die anderen beiden Spalten springt. Hier
einige grundlegende Beispielcode:
style.css
.flex-row {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.flex-column {
display: flex;
flex-direction: column;
flex-grow: 1;
border: 1px solid lightgray;
}
.box {
display: flex;
height: 100px;
width: 300px;
min-width: 200px;
flex-shrink: 1;
border: 1px solid green;
}
index.html
<div class="flex-row" style="flex-wrap:wrap">
<div class="flex-column" style="flex-grow:0">
Column 1
</div>
<div class="flex-column" style="flex-grow:0;width:200px">
Column 2
</div>
<div class="flex-column">
<div class="flex-row" style="min-width:500px;flex-wrap:wrap">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
</div>
</div>
</div>
Die letzte Spalte enthält eine Flex-Reihe mit einer Reihe von "Boxen" (siehe Beispiel).
Der gewünschte Effekt ist, dass die dritte Spalte bei der Größenanpassung des Bildschirms weiter schrumpft bis zu dem Punkt, an dem sich alle Kästchen in einer einzigen Spalte befinden und die Kästchen auf ihre minimale Breite geschrumpft sind. An diesem Punkt würde jede weitere Verringerung der Bildschirmbreite dazu führen, dass die dritte Spalte unter die anderen zwei Spalten springt, und sie würde sich dann wieder so erweitern, dass so viele Kästchen nebeneinander wie möglich enthalten sind.
In der Praxis scheint es so zu sein, dass die dritte Spalte zuerst umgebrochen wird, bevor der Inhalt umschlossen wird.
Hier ist ein visuelles Bild von dem, was ich sehen möchte passieren.
Ist dies möglich mit Flexbox zu tun? Wenn ja, was mache ich falsch?
Außerdem, warum die Antwort gegeben Arbeit ist, weil es die dritte Spalte _flex-basis_ auf 0 setzt, damit der Inhalt Breite nicht berücksichtigt wird, was dazu führt, wenn diese dritte Säule erreiche seine _min-width_, es wraps. Wenn Sie die Größe des Codebeispiels ausreichend ändern, werden die Felder vor dem Umbrechen der Spalte überlaufen. Eine richtige Lösung würde eine Medienabfrage benötigen, um dies zu erreichen, da die normale Wrap-Reihenfolge mit den äußersten Kindern beginnt und nach innen arbeitet. – LGSon
Ich gebe zu, dass, während die akzeptierte Antwort das von mir gesuchte Ergebnis lieferte, irreführende Informationen darüber liefert, wie flex funktioniert. Ich glaube jedoch, dass die Lösung, auf die ich in meinem Edit 2 hingewiesen habe, eher ein Duplikat meiner Frage ist als die von Michael_B vorgeschlagene. – RHarris
Fühlen Sie sich frei, es selbst zu beziehen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –