Ich habe einen Flex-Container mit flex-wrap: wrap und align-items: stretch , so dass Kinder gedehnt werden, wenn die Größe des Containers angepasst wird, bis das nächste Kind passt.
Das Problem ist normalerweise, dass die letzte Zeile weniger Elemente als vorherige Zeilen hat und Kinder zu sehr gestreckt werden (alle Kästchen sollten in jeder Situation gleich aussehen). Wie kann ich das verhindern, abgesehen davon, dass am Ende des Containers eine Reihe leerer Boxen erstellt wird?
Der vollständige Code ist hier: Ссылка
Es ist im Grunde:
%Vor% Dabei enthält body eine Menge Elemente mit einer Klasse child .
Die einzige Lösung, die ich bis jetzt gefunden habe, besteht darin, programmatisch einige leere Kindelemente hinzuzufügen, um eine komplette Zeile zu bilden - es ist in Ordnung, mehr als die Zeile hinzuzufügen, damit sie überlaufen (da sie leer sind). p>
Der einfachste Weg ist, den Flex vom letzten Gegenstand zu entfernen:
%Vor%Oder geben Sie ihm einen kleinen Bruchteil des Wachstums, damit es auch nicht zu wenig aussieht (besonders wenn alles andere etwas gewachsen ist)
%Vor%Wenn keiner von beiden funktioniert, füge ein leeres Div als dein letztes Item hinzu und gib ihm ein viel größeres Wachstum - verberge auch irgendwelche Grenzen und Hintergründe und gib ihm eine Höhe von Null, damit es keine andere Linie aufnimmt
%Vor% Ich denke, Sie müssten uns JS überprüfen, um zu überprüfen, ob die Breite der letzten n Kindelemente mit der Breite des ersten Elements übereinstimmt. Für jedes Element, das nicht übereinstimmt, unflex es ( flex: none ), dann legen Sie die Breite so fest, dass sie der Breite des ersten Elements entspricht.
Ich habe ein kleines Skript dafür zusammengestellt. Leider müssen Sie die Klasse smoothFlex zu dem Eltern hinzufügen, damit es funktioniert; oder Sie können einen anderen Selektor verwenden.
Ich kenne keine schnelle Möglichkeit, alle Elemente mit einem Stil display: flex auszuwählen.
Ansonsten funktioniert das folgende Skript genau so, wie ich es erwarte.
%Vor%IMO, der Flexbox-Standard sollte eine native Option dafür haben - sollte standardmäßig sein, wenn der Elternteil eingepackt ist.
Quellen: