Angular material 如何设置两个flexbox之间的间距

我使用材料设计flexbox布局，在一个盒子中，我有两个盒子。我在JSFIDLE上创建，以澄清我的意思：

我想在这些盒子之间留出一个空间

<div flex layout="row" layout-align="space-between center">
            <md-toolbar flex="15">
                 <h2 class="md-toolbar-tools">
                    <span>Home</span>
                  </h2>

            </md-toolbar>
                <!--How to set space between -->
            <md-toolbar>
                 <h2 class="md-toolbar-tools" layout-align="end center">
                    <span>Sign Up</span>
                    <span>Sign In</span>
                  </h2>

            </md-toolbar>
        </div>

家
注册
登录

我认为您可以做得更简单：

<md-toolbar>
    <div class="md-toolbar-tools">
        <span>Home</span>
        <span flex></span>
        <div>
            <span>Sign Up</span>
            <span>Sign In</span>
        </div>
    </div>
</md-toolbar>

家
注册
登录

---

您可以在HOME和SIGNUP元素之间插入灵活元素，这将填充它们之间的空间。

我认为您需要的是“版面边距”

父布局和此元素具有页边距。

对于那些对使用解决方案感兴趣的人，您可以使用

无fxLayoutGap

1.一二。二,三。三个四。四

使用fxLayoutGap

1.一二。二,三。三个四。四

<div layout="row" layout-margin>
  <div flex>Parent layout and this element have margins.</div>
</div>

<div fxLayout="row">
   <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

<div fxLayout="row" fxLayoutGap="20px">
  <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>