CSS3-Flexbox-Abstand zwischen Elementen
Etwas neues zu Flexbox (obwohl erfahren in CSS), es scheint mir, dass eine Sache, die bequem "geschönt", indem Sie die meisten tutorials die ich gelesen habe, ist der Abstand zwischen den flex-items.
Beispielsweise, einer der am meisten zitierten tutorials ist bei CSS-Tricks.
Es ist sehr gut und hilfreich gewesen, Diagramme wie diese haben mich geworfen off:
Beachten Sie die Leerzeichen zwischen den flex-items. Obwohl nirgends erwähnt, noch in den Beispiel-code, es scheint, dass der einzige Weg, um die Räume ist mit css Ränder.
Richtig, oder übersehe ich etwas wichtiges?
Da, was ich brauche, zu erstellen ist eine Menge, wie die "center" - demo vor:
Jedoch, wenn ich versuche es selbst, habe ich natürlich dieses:
wenn ich Raum um, bekomme ich diese statt. Der riesige Raum.
Es scheint daher muss ich hinzufügen, margin-right für die ersten 2 Boxen zu bekommen 3 zentriert Boxen mit einem kleinen Abstand zwischen Ihnen.
Ist es einfach nur eine schlechte Verwendung für Flexbox? Da sehe ich wenig Vorteil der Erstellung meiner 3 Boxen mit Flexbox über mit einfachen Rändern und zentrieren.
Übersehe ich etwas offensichtliches hier?
InformationsquelleAutor Steve | 2015-06-13
Du musst angemeldet sein, um einen Kommentar abzugeben.
NÖ - du bist an nichts fehlt. Flexbox ist grandios für die Bestellung der Elemente und die Festlegung der Allgemeinen Ausrichtung der Elemente entlang, entweder die Haupt-oder cross-Achsen, aber nicht sprechen direkt zu den einzelnen Element-Abstand. Wenn Sie einen Blick auf diese Codepen verwendet in der Flexbox-Artikel, werden Sie feststellen, Sie verwenden:
definieren element-Abstand. Hoffe, das hilft!
justify-content: space-between
. Mit deiner Antwort habe ich bemerkt, ich hatte eine vergessenmargin: auto
in der CSS-Elemente aus einer vorherigen Stil. Nachdem ich es entfernt, die "flex-Abstand" funktioniert (nicht mehr unregelmäßige Räume an den Seiten).Sie werden auch bemerken, dass dieses Beispiel nicht verwenden margin-top zu erstellen, die den Abstand zwischen flexbox-Elemente.
InformationsquelleAutor Ryan Miller