Angular Material Flex Layout - выравнивание по центру кнопок меню

Question

Как кнопки могут быть выровнены по центру на панели инструментов материала?

Я создал угловую панель инструментов материалов с выровненным по левому краю заголовком и некоторыми выровненными по правому краю ссылками, используя <span fxFlex></span> пример на StackBlitz

Это прекрасно работает, однако я не могу изменить ссылки на кнопки и расположить их по центру (после удаления заголовка)

Проблема демонстрируется здесь: Stackblitz

Кнопки по умолчанию имеют ширину 100%, и я переопределил их на фиксированную ширину, но все же любая попытка выравнивания содержимого или использования поля: авто с заданной шириной не удалась.

Обновление: проблема возникает при добавлении mat-menu: посмотрите, что происходит, когда mat-menu не комментируется в app.component.html в этом примере.

Answer 1

Это решение будет рассматриваться как обходной путь, так как Material Design имеет четкие рекомендации о том, как все должно выглядеть и вести себя, эти рекомендации, конечно, также реализованы в Angular Material, поэтому любые изменения, которые вы хотите внести в внешний вид и поведение компонентов по умолчанию в Угловой материал не совсем рекомендуется, но если внесенные изменения принесут пользу вашему варианту использования и ничего не сломают, я бы сказал, продолжайте.

В основном я просто нацелился .mat-menu-item и установите соответствующие стили:

.mat-menu-item {
  width: unset;
  height: unset;
  line-height: unset;
  padding: 0 10px;
  border: 1px solid black
}

https://stackblitz.com/edit/free-vote-angular-material-menu-stackru-218rt2

Answer 2

Это то, что вы пытаетесь получить?

HTML:

  <span class="spacer"></span>
  <button mat-menu-item>home</button>
  <button mat-menu-item [matMenuTriggerFor]="tags" #tagsTrigger="matMenuTrigger" (mouseenter)="tagsTrigger.openMenu()">tags</button>
  <button mat-menu-item [matMenuTriggerFor]="points">points</button>
  <button mat-menu-item [matMenuTriggerFor]="profile">profile</button>
  <button mat-menu-item>sign out</button>
  <span class="spacer"></span>

Css:

.spacer {
  flex: 1 1 auto;
}