Css 将flexbox元件粘贴到容器的每一侧（一个元件在左侧，另一个在右侧）

我知道这是一个非常基本的问题，但我无法实现我想要的

背景

我正在用Angular Material（v7）组件构建Angular 7应用程序

在材质卡片标题中，如下图所示：

目标

我希望图标贴在右边，文本贴在左边。因此，无论元素的宽度是多少，它们都会粘在每一侧

但是，如果需要，我需要能够使用剩余空间的文本。例如：

|-----container (mat-card-title)-----|
|Short title-------------------|icons|
|A longer title----------------|icons|
|A muuuuuuuuch longer title----|icons|

|----------very large container (mat-card-title)-------------|
|Short title-------------------------------------------|icons|
|A longer title in a large container-------------------|icons|
|A muuuuuch longer title in a veeeery large container--|icons|

此外，我希望两个图标（按钮元素）粘在一起，如果因为宽度小而需要中断

到目前为止

我尝试了几种方法，将flexbox样式添加到mat卡标题中

mat-card-title {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}

然后，内联：

<mat-card-title>
  <div style="flex: 2 1 auto">
    <span>Latest Messages ({{count}})</span>
  </div>
  <div style="flex: 1; justify-self: flex-end; display: flex; flex-direction: row; justify-content: end; 
              flex-wrap: nowrap">
    <button></button>
    <button></button>
  </div>
</mat-card-title>

最新消息（{count}}）

问题

这种方法行吗？如何实现我的目标？

如果我需要提供更多信息，请告诉我

---

非常感谢

我会去掉内联样式，让它成为一个类，这样更干净。它应该是这样的：

mat-card-title {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.buttons {
  display:flex;
  justify-content: flex-end;
  flex: 0.2; //note you can also just specify a width in percentage, this is like setting a width of 20% (or however wide the buttons are)
}

<mat-card-title>
  <div>
    <span>Latest Messages ({{count}})</span>
  </div>
  <div class="buttons">
    <button></button>
    <button></button>
  </div>
</mat-card-title>

mat卡片标题{
显示器：flex；
证明内容：之间的空间；
对齐内容：居中对齐；
}
.按钮{
显示器：flex；
证明内容：柔性端；
flex:0.2；//注意，您也可以用百分比指定宽度，这类似于将宽度设置为20%（或按钮的宽度）
}
最新消息（{count}}）

祝你好运