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

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

我希望每个项目周围的边距均匀（比如 10 像素）。

我试过像往常一样设置页边距，但是项目没有正确换行，每行只给我一个项目。我仍然想要每行 2 个项目。

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

那么，我怎样才能让一行在每个换行之间（垂直）有 10 像素的边距换行？

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 - 如何在换行之间添加边距？

Angular Material Flexbox - How to add margin between wrapped rows?

html

css

flexbox

angular-material