Angular Material Design 卡：如何修复对齐？答案

【问题标题】：Angular Material Design card: how to fix alignment?Angular Material Design 卡：如何修复对齐？
【发布时间】：2020-07-16 19:19:10
【问题描述】：

我正在创建一个小组件，其中包含一张卡片，该卡片显示一个问题并让用户从滑块中选择一个值。

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 } 将 flex-grow: 1 放在 mat-card-header 的孩子上，但这似乎不起作用——图标填充该区域水平但与其区域的左侧对齐。

任何帮助将不胜感激！我敢肯定这只是我缺少的一件小事。

【问题讨论】：

标签： css angular

【解决方案1】：

您必须将margin-left 调整为margin-left: auto 才能使其正常工作。 margin-left: auto 将尝试将元素本身放在其容器的最右上角。

对齐和自动边距
通过在一组 flex 项目中的一个项目上设置 margin 或 auto，我们可以创建一个拆分导航。这适用于 Flexbox 和对齐属性。一旦没有可用于自动边距的空间，该项目的行为方式与所有其他 flex 项目相同，并缩小以适应空间。

阅读更多关于box alignment in Flexbox on MDN的信息。

您的 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%;
}

然后它会产生this StackBlitz example。另请参阅此结果的 GIF。

【讨论】：