CSS定位与Angular Material？左（开始），中心，右（结束），列？

Question

我知道 Bootstrap 和 AngularJS 材料。我正在学习 Angular Material，但我找不到 CSS 定位，例如左（开始）、中心、右（结束）或列布局。例如，让我们将“说明”放在左侧，将“关闭”图标放在右侧，在一行中。

在 AngularJS 材料中我使用 layout-align:

<div layout="row">
      <span layout-align="start">
        <p class="md-title">Instructions</p>
      </span>
      <span flex></span>
      <span layout-align="end">
        <md-button class="md-icon-button" ng-click="toggleInstructions()">
          <md-icon md-svg-src="media/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
        </md-button>
      </span>
    </div>

使用 Angular Material 我找不到任何用于 CSS 定位的东西。我尝试使用纯 CSS，但两个元素现在位于两行：

这是带有纯 CSS 的 Angular HTML：

<mat-card class="instructions" *ngIf="showInstructions">
    <mat-card-title>
       <span style="display: flex; justify-content: flex-start;">Instructions</span>
       <i class="material-icons" style="display: flex; justify-content: flex-end;">close</i>
    </mat-card-title>
</mat-card>

我在Angular Material guide 中没有看到任何关于 CSS 定位的内容。 Angular Material 是否不再有助于 CSS 定位？

Answer 1

有时我会遇到类似的问题或情况。可以使用 Grid 列表进行一些布局，但在我看来有点非常笼统。 大多数时候我使用 CSS 的 flex 布局。有时它有点棘手，但对我来说它有效。

在您的情况下，您必须将“mat-card-title”也设为“display: flex”并使用“flex-direction: row”。也许需要将“span”和“i”的 flex 属性设置为所需的比率...

这是一个很好的 flex 教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/