Angular Material：如何指定布局中两列之间的间距？答案

【问题标题】：Angular Material: How do you specify spacing between two columns in a layout?Angular Material：如何指定布局中两列之间的间距？
【发布时间】：2015-12-15 21:40:15
【问题描述】：

假设我在 Angular Material 布局的单行中有两列：

<div layout="row" flex>
  <div layout="column" flex="50">
    Content 1...
  </div>
  <div layout="column" flex="50">
    Content 2...
  </div>
</div>

现在，假设我想在列之间设置任意数量的空间（例如 10 像素的“排水沟”）。我可以创建第三个空 div，设置一个小的“flex”值并将“flex”值从 50 修改为更小的值，但这似乎是一个 hack，并且会创建一个基于百分比的排水沟宽度。似乎应该有一种更清洁的方法来获得精确的排水沟而不创建空的 div。我是否必须在列 div 上放置类并设置 CSS 边距值（并处理左与右等）？任何人都可以通过 Angular Material 方式执行此操作？

【问题讨论】：

标签： angular-material

【解决方案1】：

我不确定这是否是“Angular Material”的做事方式。但我能感觉到你的痛苦。

目前，我正在将一些 Bootstrap 代码迁移到 Angular Material，并且确实需要一种方法。

这就是我所做的。

由于 Angular Material 的 layout 指令只影响直接子级，我相信这是 Angular Material 的一种操作方式。因此，在 layout div 上，我添加了一个类 gutter，这是该类附带的 SASS（更漂亮的 CSS，带有变量）：

.gutter {
    (greater-than) * {
        padding-right: $layout-gutter-width;
        ~ * {
            padding-left: $layout-gutter-width;
        }
        &:last-of-type {
            padding-right: 0;
        }
    }
}

注意 - 我不知道如何将> 放在那里，所以用“（大于）”代替它

解释
$layout-gutter-width 实际上是由 Angular Material 附带的 angular-material.scss 定义的（我在我的项目中使用 SASS），但你可以将它设置为任何你想要的，CSS 或SASS，10px，16px，50px，随便什么。

对于那些不完全熟悉此 SASS 中发生的事情的人：

> * 这里的意思是“...的任何直系后代”
~ * 这里的意思是“...的任何直系兄弟姐妹”
&:last-of-type 这里的意思是“这些直系后代中的最后一个……”

因此，对于具有类gutter 的元素的每个直接后代，我们添加padding-right。对于每个后续的兄弟元素，我们添加padding-left，对于最后一个元素，我们删除padding-right。第一个元素没有padding-left，最后一个元素没有padding-right。

最终这得到了我们想要的填充。

<div layout="row" class="gutter" layout-align="center center">
    <div flex="50">
        ...
    </div>
    <div flex="50">
        ...
    </div>
</div>

【讨论】：

【解决方案2】：

我相信，至少现在，您的样本之间获得空间的“材料方式”将是这样的：

<div fxLayout="row" flex fxLayoutGap="10px">
  <div fxLayout="column" flex="50">
    Content 1...
  </div>
  <div fxLayout="column" flex="50">
    Content 2...
  </div>
</div>

【讨论】：

【解决方案3】：

你可以用'layout-margin'做很多事情 https://material.angularjs.org/latest/layout/options 例子：

<div layout="row" layout-margin>
  <div flex>Parent layout and this element have margins.</div>
</div>
<div layout="row" layout-padding>
  <div flex>Parent layout and this element have padding.</div>
</div>
<div layout="row" layout-fill style="min-height: 224px;">
  <div flex>Parent layout is set to fill available space.</div>
</div>
<div layout="row" layout-padding layout-margin layout-fill style="min-height: 224px;">
  <div flex>I am using all three at once.</div>
</div>

【讨论】：

【解决方案4】：

您可以在选项之间使用带有空格的布局对齐。

【讨论】：