在 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

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

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

如果您使用<div fxLayout="row">，它将帮助您保持水平。

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

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

这里是 sn-p。

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

希望这是有用的。