Блог

Главная - Вопросы по программированию - Угловой материал FxLayout — выровняйте одну кнопку слева и одну справа

Угловой материал FxLayout — выровняйте одну кнопку слева и одну справа

#flexbox #angular-material #angular-flex-layout

Вопрос:

отредактированный:

Существует ли директива FxLayout для перемещения кнопки закрытия слева и оставления других кнопок справа? с другой стороны, как я могу достичь того же результата с помощью css?

 <div class="actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
    <button mat-raised-button color="secondary" [mat-dialog-close]="true" >Close</button>
    <button mat-raised-button color="primary" (click)="previous()" >Previous</button>
    <button mat-raised-button color="primary" (click)="next()" >Next</button>
</div>

Ответ №1:

Использование угловой гибкой компоновки

 <div fxLayout="row" fxLayoutAlign="space-between center">
  <button> Other button</button>
  <div>
    <button mat-raised-button color="secondary" [mat-dialog-close]="true">
        Close</button>
    <button mat-raised-button color="primary" (click)="save()">
        Save</button>
  </div>
</div>

Использование CSS

 .space-between-container {
  border: 1px solid #808080;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.flex-container {
  border: 1px solid #808080;
  display: flex;
}

.spacer {
  flex: 1 1 0;
} 
 <div class="space-between-container">
  <button> Other button</button>
  <div>
    <button mat-raised-button color="secondary" [mat-dialog-close]="true">
        Close</button>
    <button mat-raised-button color="primary" (click)="save()">
        Save</button>
  </div>
</div>
<div class="flex-container">
  <button> Other button</button>
  <span class="spacer"></span>
  <button mat-raised-button color="secondary" [mat-dialog-close]="true">
        Close</button>
  <button mat-raised-button color="primary" (click)="save()">
        Save</button>
</div>

В основном он использует свойство CSS justify-content: space-between

Комментарии:

1. ваше предложение работает,но в своем вопросе я забыл упомянуть, что у меня более двух кнопок (моя ошибка, простите меня, я отредактировал ее!) Результат, которого я хотел бы достичь, — это одна кнопка слева, а все остальные справа

2. @alex обновил ответ. вы могли бы просто обернуть вторую группу кнопок в div

Метки: