html - 在 Flex 行之间添加空间

Question

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

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

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

它呈现为:

我尝试添加这个 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>

希望这是有用的。