Angular material 角度材质：如何指定布局中两列之间的间距？

假设在角度材质布局中，一行中有两列：

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

内容1。。。
内容2。。。

现在，假设我想在列之间设置任意数量的空间（例如，10px的“边沟”）。我可以创建第三个空div，设置一个小的“flex”值，并将“flex”值从50修改为更小的值，但这看起来像是一个黑客，会创建一个基于百分比的边沟宽度。似乎应该有一种更干净的方法来获得准确的排水沟，而不创建空div。我是否必须将类放在我的列div上并设置CSS边距值（以及处理左对右等）？有没有人能用“角度材料”的方法来做这件事？

我不确定这是不是“角度材料”的方法。但我感觉到了你的痛苦

目前，我正在将一些引导代码迁移到Angular Material，确实需要一种方法来实现这一点

这就是我所做的

由于Angular Material的

布局

指令只影响直接子对象，因此我相信这是一种Angular Material的操作方式。因此，在

layout

div中，我添加了一个类，

ground

，下面是该类附带的SASS（只是更漂亮的CSS，带有变量）：

{
（大于）*{
右填充：$布局边沟宽度；
~ * {
左侧填充：$layout檐槽宽度；
}
&：最后一种{
右边填充：0；
}
}
}

注意-我不知道如何将

放在里面，所以用它代替“（大于）”

解释

$layout gutter width

实际上是由

angular material.scss

定义的，它与angular material一起提供（我在我的项目中使用SASS），但您可以将其设置为任何您想要的，CSS或SASS、10px、16px、50px，等等

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

*

这里的意思是“任何……的直系后裔”

~*

这里的意思是“任何……的直接兄弟姐妹”

&:last of type

在这里的意思是“这些直系后代中的最后一个…”

因此，对于类为

gotter

的元素的每个直接子体，我们添加了

右填充。对于每个后续的同级元素，我们添加
左填充
，对于最后一个元素，我们删除
右填充
。第一个元素将不具有
左填充
，最后一个元素将不具有
右填充

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


...
...
使用“版面边距”可以做很多事情
示例：

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


父布局和此元素具有页边距。
父布局和此元素具有填充。
父布局设置为填充可用空间。
我正在同时使用这三个。
您可以使用“布局与间距对齐”选项。
我相信您的样品获得间距的“实质性方式”，至少现在是这样的：

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


内容1。。。
内容2。。。