Ang angle Material Flexbox - Jak dodać margines między owiniętymi wierszami?

Question

Używam materiału kątowego i jego funkcji flexbox.

Natrafiłem na problem, który wydaje mi się prosty, ale mam z nim problemy.

Utworzono this Codepen do demostracji mojego problemu.

Więc mam wiersz z przedmiotów, które przekraczają 100% tego wiersza i owinięcia włączone, więc mam dwa rzędy elementów bez marginesów, tak:

<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> 

i używam tej 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; 
} 

Chcę uzyskać równy margines (powiedzmy 10px) wokół każdej pozycji wokół nich.

Próbowałem ustawić marginesy tak jak normalne, ale elementy nie zawijają się prawidłowo i dają mi tylko jeden przedmiot w rzędzie. Nadal chcę 2 przedmioty w rzędzie.

Pomyślnie uzyskujemy marginesy na lewo i na prawo, dodając element div dla elementu i ustawiając margin: 10px;, ale górny i dolny margines są całkowicie ignorowane.

Jak zatem uzyskać wiersz do zawijania z marginesem 10 pikseli między (pionowo) każdym owiniętym rzędem?

Answer 1

Można spróbować nadrzędnymi część niniejszej dyrektywy kątowe:

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

z tym CSS:

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

Revised Codepen

Więcej o CSS calc funkcji.