Warum sind die flex-Elemente nicht umbrechen?
Ich bin versucht, mehrere Reihen von Quadraten (3 pro Zeile), die die gleiche Höhe haben.
Ich geschrieben habe, einige HTML-und CSS aber die Boxen gehen alle auf der gleichen Linie.
Hier ist, was ich habe, so weit:
CSS:
#list-wrapper {
display: flex;
width: 100%;
}
#list-wrapper div {
width: 33.33%;
}
#list-wrapper div img {
flex: 1;
}
HTML:
<div id="list-wrapper">
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
<div>
<img src="images/1.png" alt="image one" />
</div>
<div>
<img src="images/2.png" alt="image two" />
</div>
</div>
Wenn ich das laden der Seite mit diesem werden alle Boxen angezeigt, aber Sie liegen alle auf einer Linie, die über die parent-div mit 100% Breite.
Jede Hilfe wird sehr geschätzt.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einer ersten Einstellung eines flex-container ist
flex-wrap: nowrap
.Dies bedeutet, dass beim erstellen eines flex-container (durch Anwendung
display: flex
oderdisplay: inline-flex
auf ein element) alle Kind-Elemente ("flex-items") beschränkt sich auf eine einzige Zeile.Aktivieren der flex-Elemente zu wickeln verwenden
flex-wrap: wrap
.Hier sind ein paar Beispiele, wie die flex-Eigenschaften:
Einer einfachen flex-container mit verschiedenen flex-Elemente, die ein Bild enthält:
CSS:
HTML:
Beachten Sie, dass nur eine flex-Eigenschaft deklariert wurde:
display: flex
. Diese stellt die flex-container. Die folgenden Verhaltensweisen sind standardmäßig:flex-wrap: nowrap
flex-direction: row
justify-content: flex-start
Erlauben, die Gegenstände zu wickeln, fügen Sie
flex-wrap: wrap
:CSS:
HTML:
Nur drei Artikel pro Zeile, verwenden Sie die
flex
Eigenschaft:CSS:
HTML:
Auch alle flex-items haben die gleiche Höhe standardmäßig (
align-items: stretch
).CSS:
HTML:
Die Strecke ist mehr erkennbar, wenn Sie wiederherstellen
flex-wrap: nowrap
und geben Sie dem container eine Höhe:CSS:
HTML:
Wenn Sie mit flexbox und möchten die Inhalte zu wickeln, müssen Sie
flex-wrap: wrap
. Standardmäßig flex-Elemente nicht umbrechen.Ihren code hier ist nichts zu tun, weil die Eltern von
#list-wrapper div img
ist nichtdisplay: flex
. Sie verschieben müssen, um diese zu#list-wrapper div
:Haben die Bilder mit drei über, sollten Sie
flex-basis: 33.33333%
.Ändern Sie Ihre CSS-und es funktioniert:
JS Fiddle: https://jsfiddle.net/f47prnnt/1/