Angular Material Flexbox - 如何在包裹行之间添加边距？

我正在使用 Angular Material 及其弹性盒功能。

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

我已经创建了this https://codepen.io/anon/pen/grZowkCodepen 用于演示我的问题。

因此，我有一行包含超过该行 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;
}

我希望周围的每个项目都有均匀的边距（假设为 10 像素）。

我尝试像平常一样设置边距，但项目无法正确换行，每行只给出一个项目。我仍然想要每行 2 个项目。

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

那么，如何才能让行以 10px 的边距（垂直）换行呢？

您可以尝试覆盖此 Angular 指令的部分内容：

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

修订版代码笔 https://codepen.io/anon/pen/yJKvrp?editors=1100

阅读有关 CSS 的更多信息calc https://drafts.csswg.org/css-values-3/#calc-notation功能。