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:

CSS3-Flexbox-Abstand zwischen Elementen

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:
CSS3-Flexbox-Abstand zwischen Elementen

Jedoch, wenn ich versuche es selbst, habe ich natürlich dieses:
CSS3-Flexbox-Abstand zwischen Elementen

wenn ich Raum um, bekomme ich diese statt. Der riesige Raum.
CSS3-Flexbox-Abstand zwischen Elementen

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

Schreibe einen Kommentar