Kann flexbox-unterteilen Elemente gleichmäßig auf mehrere Zeilen?
Ich habe gespielt, um mit responsive flexbox, grids, die keine media queries.
http://jsbin.com/qurumisu/1 (skalieren der Fenster, um zu sehen, wie es funktioniert)
Passt es so viele flex-Elemente es können pro Zeile erstreckt und Ihre Breite gleichmäßig zu füllen die ganze Zeile. Dies bedeutet jedoch nicht, helfen, die "verwaisten" Einträge. Wenn die erste Zeile passt 5/6 Elemente gibt es nur noch für die zweite Linie, so dass es zu dehnen, viel breiter als die Geschwister. Ich würde es vorziehen, um dieses Verhalten zu vermeiden, indem er die Elemente gleichmäßig aufgeteilt auf die Menge der Zeilen erforderlich.
Ist das möglich?
Flexbox ist nicht von einem grid-system, zumindest nicht die Art, wie grid-Systeme gedacht sind in CSS.
Ich weiß. Allerdings gibt es eine Menge Dinge in css, die sind nicht dazu da, um verwendet werden, wie Sie derzeit sind. CSS-sprites zum Beispiel. Und immer noch löst ein großes problem 🙂
Ich weiß. Allerdings gibt es eine Menge Dinge in css, die sind nicht dazu da, um verwendet werden, wie Sie derzeit sind. CSS-sprites zum Beispiel. Und immer noch löst ein großes problem 🙂
InformationsquelleAutor Albin | 2014-02-28
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nein, nicht ohne media queries anpassen des flex-basis-Wert. Flex-items, Strecken und wickeln Sie versuchen, maximieren Sie die Anzahl der Elemente, die passen auf jede Zeile.
Möchten Sie vielleicht zu prüfen, mit dem multi-column-Modul statt, die versuchen werden, gleichmäßig verteilen Elemente über alle Spalten erstellt:
http://caniuse.com/#feat=multicolumn
InformationsquelleAutor cimmanon
War ich auf der Suche nach genau der gleichen Sache (Futter, bis die thumbnails in einer flex-wrap-Sache). Ihr Beispiel gab mir Anweisungen, und ich spielte mit ihm ab bit und kam mit der folgenden:
Gut, wenn Sie bereit wäre, fügen Sie einige zusätzliche markup der HTML-code, es ist tatsächlich möglich. Unter der Annahme, dass ich zeigen kann
n
Elemente auf voller Breite Bildschirm, fügte ichn-1
Elemente der<div class="hidden-item">
am Ende der container und modifizierte den CSS-code so, dass diese versteckten Elemente haben die gleiche Breite aber keine Höhe. Auf diese Weise, Sie wickeln herum, als auch, zwingt der Letzte Punkt(s) zu verkleinern, ohne dass sich die Höhe des Containers.Ergebnis ist hier:
http://output.jsbin.com/qaxatujaho/1
Ich weiß, das ist super alt, aber ich war auf der Suche für ein paar Stunden nach einer Lösung für dieses Problem. Ihre Lösung funktioniert, absolut perfekt für meinen Fall.
InformationsquelleAutor skybow