Flexbox: Wie rechtfertigen Sie Inhalte mit Raum-zwischen-UND haben alles zentriert?
Ich in ein problem mit flexbox.
Ich habe einen div, der eine max-Breite von 920px. Ich will die Boxen Inhalt zu füllen, ist das div von Links nach rechts, um die max mögliche Breite, mit allem, was mit gleichen Margen. Wenn die Bildschirm-Größe geht nach unten, um ein Feld pro Zeile, ich will, dass die box zentriert auf dem Bildschirm.
Hier ist die Website in Aktion: http://javinladish.com/code/index.html
Wenn ich:
justify-content: center;
Dann die Kisten nicht füllen, bis die max Breite.
Wenn ich:
justify-content: space-between;
Dann die Boxen nicht zentriert zu bleiben, wenn ich gehen, um ein Feld pro Zeile.
Wie kann ich erreichen, eine glückliche balance zwischen den beiden? I. e füllt sich die max-width des Containers und halten Sie alle Inhalte zentriert?
Dank im Voraus für Eure Hilfe.
- Haben Sie versucht
justify-content: space-around
? - Das wird den gleichen Effekt haben wie
justify-content: space-around
, aber es wird nicht die Wirkung, die der OP sucht (siehe Kommentar unten). - Ah, guter Punkt.
- Sie konnte Verwendung von media queries. @media screen and (max-width 580px)
- Suchen Sie auf der Seite in Frage, du gehst zu haben eine harte Zeit mit Flexbox, um Platz für die mobilen Browser, da die meisten von Ihnen nicht unterstützen einwickeln. Sie gehen zu müssen, wählen Sie einen anderen Weg, dieses problem zu lösen.
- Irgendwelche Vorschläge @cimmanon ?
- Versuchen Sie dies: stackoverflow.com/questions/4771304/...
- Es gibt keinen Grund flexbox-Probleme bei der Unterbringung von mobilen Browsern. Die meisten Browser unterstützen nicht die Verpackung? Ich weiß nicht einmal wissen, was das bedeutet. caniuse.com/#feat=flexbox Bitte siehe Antwort unten
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die beste Lösung wäre die Verwendung
margin: auto;
auf die flex-items der horizontalen Ränder wie folgt ein:CSS:
HTML:
Das einzige problem könnte sein, wenn die Letzte Zeile hätte mehr als ein Punkt, aber nicht genug, um zu füllen die ganze Zeile, es wird eine Menge von Raum zwischen der letzten Zeile Elemente.
justify-content: space-around
werden die Gegenstände nicht erreichen beide Seiten.Auf dem parent-div, wo Sie
justify: space-beween;
Sie möchten, gehören auch:
align-items: center;
So könnte man es schreiben wie dieses: