Angular Material Flexbox - Wie füge ich den Rand zwischen gewickelten Reihen hinzu?

Question

Ich verwende Angular Material und seine Flexbox-Funktionalität.

Ich bin jetzt auf ein Problem gestoßen, das mir scheint, sollte einfach sein, aber ich habe Probleme damit.

Ich habe this Codepen erstellt, um mein Problem zu demonstrieren.

So habe ich eine Reihe mit Gegenständen, die 100% der Zeile überschreiten und hat Wrap-Option aktiviert ist, so dass ich zwei Reihen von Elementen ohne Ränder, wie folgt aus:

<div class="row" layout="row" layout-wrap="wrap"> 
    <div flex="50" class="item1"></div> 
    <div flex="50" class="item2"></div> 
    <div flex="50" class="item3"></div> 
    <div flex="50" class="item4"></div> 
</div> 

Und ich bin mit dieser CSS :

.row { 
    background-color: grey; 
    padding: 10px; 
} 

.item1 { 
    height: 200px; 
    background-color: blue; 
} 

.item2 { 
    background-color: red; 
} 

.item3 { 
    backgronud-color: black; 
    height: 100px; 
} 

.item4 { 
    background-color: green; 
} 

Ich möchte eine gleichmäßige Marge (sagen wir 10px) um jedes Element um sie herum.

Ich habe versucht, Ränder wie normal einzustellen, aber dann die Elemente nicht richtig wickeln und mir nur ein Element pro Zeile geben. Ich möchte immer noch 2 Gegenstände pro Reihe haben.

Ich bekomme erfolgreich Ränder nach links und rechts, wenn ich ein untergeordnetes Element zu einem Element hinzufüge und margin: 10px; festlege, aber obere und untere Ränder werden vollständig ignoriert.

Also, wie kann ich eine Zeile mit einem 10px Rand zwischen (vertikal) jeder umhüllten Zeile umwickeln?

Answer 1

können Sie versuchen, einen Teil dieser Angular Richtlinie überschreiben:

flex="50" (which computes to flex: 1 1 50% [flex-grow, flex-shrink, flex-basis]) 

mit diesem CSS:

.row > div { 
    flex-basis: calc(50% - 20px) !important; /* width less horizontal margins */ 
    margin: 10px; 
} 

Revised Codepen

Lesen Sie mehr über CSS calc Funktion.