Angular 材料設計卡：如何修復 alignment？

Question

我正在創建一個包含顯示問題的卡片的小組件，並讓用戶 select 從 slider 中獲取值。

HTML 是：

<mat-card class="survey-card">
  <mat-card-header>
    <mat-icon>question_answer</mat-icon>
    <mat-card-title>
      {{question}}
    </mat-card-title>
    <mat-card-subtitle>
      Choose your best answer.
    </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <mat-slider class="survey-slider" thumbLabel [min]="minValue" [max]="maxValue" (change)="sliderChanged($event)">
    </mat-slider>
  </mat-card-content>
</mat-card>

我想要的是圖標位於右上角。 但是，它現在的位置取決於問題中文本的長度。

這是一張圖片，其中我展示了其中 3 個組件，並帶有不同長度的問題：

我的 SCSS 是

* {
  border: 1px solid black;
}
.survey-card {
  border: 1px solid steelblue;
  border-radius: 10px;
  max-width: 20vw;
  margin: 1vw;
}

// Force icon to be in the upper-right corner.  Not a great solution, but seems to work.
.mat-icon {
  margin-left: 40px;
}

.mat-slider-horizontal {
  min-width: 100%;
}

請注意，將“強制圖標”放入右上角的代碼實際上並不起作用。 <mat-icon>和<mat-card-title>在 flexbox 中，所以我嘗試使用 mat-card-header 將flex-grow: 1放在 mat-card-header 的子mat-card-header > * { flex-grow: 1 }但這似乎不起作用——圖標水平填充該區域，但與其區域的左側對齊。

任何幫助，將不勝感激。 我敢肯定這只是我缺少的一件小事。

Answer 1

您必須將margin-left調整為margin-left: auto才能使其工作。 margin-left: auto將嘗試將元素本身放在其容器的最右上角。

Alignment 和自動邊距
通過在一組全部對齊開始的彈性項目中的一個項目上設置一個auto margin ，我們可以創建一個拆分導航。 這適用於 Flexbox 和 alignment 屬性。 一旦沒有可用於自動邊距的空間，該項目的行為方式與所有其他彈性項目相同，並縮小以嘗試適應空間。

在 MDN 上的 Flexbox 中閱讀有關框 alignment 的更多信息。

您的 CSS 將如下所示：

* {
  border: 1px solid black;
}
.survey-card {
  border: 1px solid steelblue;
  border-radius: 10px;
}

.mat-icon {
  margin-left: auto;
}

.mat-slider-horizontal {
  min-width: 100%;
}

然后它產生了這個 StackBlitz 示例。 另請參閱結果的此 GIF。