角材2カードヘッダーボタンセット右

Question

角度材2を使用し、カードヘッダーのアイコンボタンを使用したい。ボタンを右に設定するにはどうしたらいいですか？

私の計画：

現在のウェブサイト：

私は、ヘッダー内のボタンROP権を設定したいです。どうすればいいですか？ 問題がないのでカテゴリコードを除外します。 typescriptコードでは、カードを追加するためのforループと、カードをクリックするためのダミーメソッドだけです。

.healthy-search { 
 
    width: 100% 
 
} 
 

 
.healthy-card { 
 
    margin-right: 5px; 
 
    margin-bottom: 5px; 
 
}

<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start"> 
 
    <div class="flex-item" fxFlex="90%" fxFlex.xs="90%"> 
 
    <mat-form-field class="healthy-search"> 
 
     <textarea matInput placeholder="Suche"></textarea> 
 
    </mat-form-field> 
 
    </div> 
 
</div> 
 
<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start"> 
 
    <div class="flex-item" fxFlex="85%" fxFlex.xs="85%"> 
 
    <mat-expansion-panel> 
 
    
 
    <!-- Here is the Category --> 
 
     
 

 
    <!--Elements of Category --> 
 

 
     <div class="flex-container" fxLayoutWrap fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start"> 
 
     <div class="flex-item healthy-card" fxFlex="400px" *ngFor="let number of numbers" (click)="cardClick()"> 
 
      <mat-card class="example-card"> 
 
      <mat-card-header> 
 
       <mat-card-title>Title {{number}}</mat-card-title> 
 
       <button mat-icon-button fxLayoutAlign="right"> 
 
       <mat-icon aria-label="Example icon-button with a heart icon">Edit</mat-icon> 
 
       </button> 
 
       <button mat-icon-button fxLayoutAlign="right"> 
 
       <mat-icon aria-label="Example icon-button with a heart icon">Delete</mat-icon> 
 
       </button> 
 
      </mat-card-header> 
 
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"> 
 
      <mat-card-content> 
 
       <p> 
 
       The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes 
 
       very well with mountainous terrain, the Shiba Inu was originally bred for hunting. 
 
       </p> 
 
      </mat-card-content> 
 
      </mat-card> 
 
     </div> 
 
     </div> 
 
    </mat-expansion-panel> 
 
    </div> 
 
</div>

Lyror

Answer 1

まずボタンからfxLayoutAlign = "右" を奪います。 fxLayoutAlignはコンテナ用です。

タイトルとボタンの間にfxFlexがあるdivやその他のプレースホルダーが必要です。これにより、ボタンが最後まで押されます。

<md-card-header fxLayout="row"> 
    <md-card-title >Title </md-card-title> 
    <div fxFlex></div> 
    <button md-button>Something</button> 
</md-card-header>