Angular 5中如何实现mat-card-title文本的左右对齐？

嘿，我来帮你搞定这个小难题！要让<mat-card-title>里的文本一部分左对齐、一部分右对齐，用Flex布局就能轻松实现，完全不用复杂的嵌套~ 之前你尝试的div方案没成功，大概率是没利用好Flex的特性，或者样式被Angular Material的默认样式覆盖了，试试下面的方法：

步骤1：调整HTML结构 #

把需要分开对齐的文本分别放在独立的容器里（比如<span>或者<div>），给<mat-card-title>加一个自定义类方便写样式：

<mat-card>
  <mat-card-title class="split-title">
    <span>左对齐的测试文本</span>
    <span>右对齐的内容</span>
  </mat-card-title>
</mat-card>

步骤2：添加Flex样式 #

在组件的CSS文件里给自定义类加上Flex布局属性，利用justify-content: space-between让内部元素分别靠向左右两端：

.split-title {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 可选，让两行文本垂直居中对齐，更美观 */
}

/* 如果你需要单独调整某部分的样式，还可以给对应span加类 */
.split-title .left-content {
  font-weight: bold;
}

.split-title .right-content {
  color: #666;
  font-size: 0.9rem;
}

为什么这个方法有效？ #

Angular Material的<mat-card-title>本身是块级元素，给它设置display: flex后，内部的子元素会自动变成Flex项，justify-content: space-between会让第一个子元素贴左、最后一个子元素贴右，中间自动填充空白，完美实现你要的效果。

如果你的需求更复杂（比如中间还有文本需要居中），可以给中间的元素加flex: 1让它占满剩余空间，不过针对你的左右对齐需求，上面的方案就足够啦~

内容的提问来源于stack exchange，提问作者techkuz