Question

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

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

我已经创建了this 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;
}

Revised Codepen

详细了解CSS calc功能。

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

1 个答案: