在Flex行之间添加空间

Question

我在Angular 5组件中有这个html：

＆＃13;

＆＃13;

.row>div {
  flex-basis: calc(50% - 20px) !important;
  /* width less horizontal margins */
  margin: 10px;
}

＆＃13;

<div fxLayout="column">

  <div fxLayout="row">
    <button mat-raised-button color="accent">
          <mat-icon>play_button</mat-icon>
          Start Recording
        </button>
  </div>

  <div fxLayout="row">
  </div>

  <div fxLayout="row">
    <button mat-raised-button color="accent">
          <mat-icon>play_button</mat-icon>
          Stop Recording
        </button>
  </div>

  <div fxLayout="row">
  </div>

  <div fxLayout="row">
    <div fxLayout="column">
      <div>
        <mat-checkbox>Firefox</mat-checkbox>
      </div>

      <div>
        <mat-checkbox>Chrome</mat-checkbox>
      </div>

      <div>
        <mat-checkbox>Allow XPath</mat-checkbox>
      </div>
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

它呈现给：

我尝试添加此CSS以增加元素之间的间距：

.row > div {
  flex-basis: calc(50% - 20px) !important; /* width less horizontal margins */
  margin: 10px;
}

但这不起作用 - 如何在元素之间添加垂直间距？

Answer 1

我删除了fxLayout row，并添加了一个自定义类来解决问题。

请参阅他们的文档，了解他们如何使用row。 https://github.com/angular/flex-layout/wiki/fxLayout-API

如果您使用的是<div fxLayout="row">，它会帮助您获得水平。

如果您使用<div fxLayout="column">，它将如下图所示。

因此，最好不要使代码复杂化。所以你只能使用一个 column并完成任务

以下是摘录。

.row {
  margin: 10px;
}

<div fxLayout="column">
  <div class="row">
    <button mat-raised-button color="accent">
          <mat-icon>play_button</mat-icon>
          Start Recording
        </button>
  </div>
  <div class="row">
    <button mat-raised-button color="accent">
          <mat-icon>play_button</mat-icon>
          Stop Recording
        </button>
  </div>
</div>
<div fxLayout="column">
  <div class="row">
    <mat-checkbox>Firefox</mat-checkbox>
  </div>

  <div class="row">
    <mat-checkbox>Chrome</mat-checkbox>
  </div>

  <div class="row">
    <mat-checkbox>Allow XPath</mat-checkbox>
  </div>
</div>

希望这很有用。