Как переместить элементы в HTML с Angular

Question

У меня есть простая страница, как показано ниже:

Как вы видите, там есть 3 кнопки, но я хочу переместить кнопку Отмена вправо от страницы, как показанострелка на изображении.

Мой код таблицы:

<mat-card-actions fxLayout="row wrap">
        <div>
          <button type="button" class="action-buttons1" [disabled]="!filterDataSelected"
                  (click)="onClearButtonClicked()">
            Clear
          </button>
          <button type="button" class="action-buttons2" [disabled]="!filterDataSelected"
                  (click)="fillOrRefreshTableData()"
          >Search
          </button>
        </div>
        <div>
          <button type="button" class="action-buttons3" (click)="calcelProcess()">
            Cancel
          </button>
        </div>
</mat-card-actions>

Как мне сдвинуть только кнопку Отмена, а не другие?Я положил его в другой блок div, но я не уверен, что это правильно или нет.Я попытался поэкспериментировать с margin-padding-align внутри определения div кнопки отмены, но он не двигается.

примечание: весь этот код находится внутри блока

Answer 1

Попробуйте это:

HTML

<mat-card-actions fxLayout="row wrap">
<div class="wrapper">
  <div>
    button type="button" class="action-buttons1" [disabled]="!filterDataSelected"
            (click)="onClearButtonClicked()">
      Clear
    </button>
    <button type="button" class="action-buttons2" [disabled]="!filterDataSelected"
            (click)="fillOrRefreshTableData()"
    >Search
    </button>
  </div>
  <div>
    <button type="button" class="action-buttons3" (click)="calcelProcess()">
      Cancel
    </button>
  </div>
</div>
</mat-card-actions>

Css

.wrapper {
    display: flex;
    justify-content: space-between;
}

Answer 2

Поскольку вы уже разделили кнопки на 2 элемента, вы можете добавить fxLayoutAlign="space-between" к родительскому элементу.Как это:

<mat-card-actions fxLayout="row wrap" fxLayoutAlign="space-between">