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

Question

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

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

我已经创建了这个 Codepen来解释我的问题.

所以我有一行项目超过该行的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

您可以尝试覆盖此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;
}  

修改了Codepen

阅读有关CSS calc功能的更多信息