Adding space between Flex rows

Question

I have this html in an Angular 5 component:

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

it renders to this:

I tried adding this CSS to increase the spacing between the elements:

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

but that didn't work - how can I add vertical spacing between the elements?

Answer 1

I have removed the fxLayout row, and added a custom class to solve the issue.

Please refer their documentation about how they use row. https://github.com/angular/flex-layout/wiki/fxLayout-API

If you are using <div fxLayout="row">, it will help you to get horizontal.

If you use <div fxLayout="column">, it will look like the below picture.

Therefore, better not to complicate your code. So you can use one only column and get it done

Here is the snippet.

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

Hope this is useful.