角材Flexbox - 如何在包装行之间添加边距？

Question

我正在使用Angular Material及其flexbox功能。

我现在遇到一个问题，在我看来应该很简单，但我有问题。

我创建了this用于演示我的问题。

所以我有一个排，超过该行的100％，并已裹启用的项目，所以我得到的物品的两排没有利润，这样的：

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

而且我使用这个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; 
} 

我想在他们周围的每个项目周围都有一个均匀的边距（比如说10px）。

我试过设置边界像正常，但然后项目不能正确包装，并给我每行只有一个项目。我仍然想要每行2个项目。

当我向项目添加子div并设置margin: 10px;时，我成功获得了左右边距，但上下边距完全被忽略。

那么，我怎样才能得到一个行（垂直）每个包装行之间10px的余量包装？

Answer 1

你可以尝试重写此角指令的一部分：

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

这个CSS：

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

Revised Codepen

了解更多关于CSS calc功能。