Ich stoße auf ein Problem mit der flexbox.
Ich habe ein div, das eine maximale Breite von 920px hat. Ich möchte, dass die Inhaltsboxen das div von links nach rechts auf die maximal mögliche Breite auffüllen, wobei alles die gleichen Ränder hat. Wenn die Bildschirmgröße auf eine Box pro Zeile reduziert wird, möchte ich, dass diese Box auf dem Bildschirm zentriert wird.
Hier ist die Seite in Aktion: Ссылка
Wenn ich verwende:
%Vor%Dann füllen die Boxen nicht die maximale Breite.
Wenn ich verwende:
%Vor%Dann bleiben die Boxen nicht zentriert, wenn ich auf eine Box pro Zeile gehe.
Wie kann ich eine glückliche Balance zwischen den beiden erreichen? Das heißt, die maximale Breite des Containers auffüllen und alle Inhalte zentriert halten?
Vielen Dank im Voraus für Ihre Hilfe.
Die beste Lösung wäre, margin: auto; auf den vertikalen Rändern der Flex-Elemente wie folgt zu verwenden:
Das einzige Problem könnte sein, dass wenn die letzte Zeile mehr als ein Element hat, aber nicht genug, um die ganze Zeile aufzufüllen, zwischen den letzten Zeilenelementen viel Platz sein wird.
Hey, versuche diese Lösung: Ссылка
Sie sind auf dem richtigen Weg, benutzen Sie justify-content: space-between zuerst, aber wenn es 2 Boxen oder 1 in den Spalten gibt, verwenden Sie justify-content: center. Sie müssen also Medienabfragen verwenden. Mache hier ein bisschen Mathe:
Grundsätzlich haben die Boxen Breite: 100%; und Rand links / rechts: 1%, aber geben Sie ihnen unterschiedliche maximale Breiten bei jeder Medienabfrage. Also habe ich zuerst eine feste maximale Breite benutzt: 260px, dann bei 900px Bildschirmbreite (2-Box pro Zeile) mache ich jede Box max-Breite: 46% (2 Boxen mit 1% Rand auf jeder Seite), dann bei 600px Bildschirmbreite (1-Box pro Zeile) können wir max-Breite: 98% setzen. (Auch erwähnenswert, dass ich Box-Sizing verwenden: Rand-Box, um diese Prozentsätze funktionieren zu lassen)
Hoffe, das hilft.
%Vor%