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

InformationsquelleAutor javinladish | 2014-03-05
Schreibe einen Kommentar