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

Posted 2023-03-07

【中文标题】Angular Material Flexbox - 如何在包裹的行之间添加边距？

【英文标题】：Angular Material Flexbox - How to add margin between wrapped rows?

【发布时间】：2016-11-25 03:56:36

【问题描述】：

我正在使用 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; 时，我成功地获得了左右边距，但顶部和底部边距被完全忽略。

那么，我怎样才能在每个包裹的行之间（垂直）以 10px 的边距包裹一行？

【参考方案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 函数的信息。

【讨论】：

谢谢，这行得通！之前在 CSS 中没有见过 calc()。