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

【问题标题】：Sticking flexbox elements to each side of container (one element to the left, the other to the right)将 flexbox 元素粘贴到容器的每一侧（一个元素在左侧，另一个在右侧）
【发布时间】：2020-05-28 10:48:13
【问题描述】：

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

背景

我正在使用 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-card-title 元素

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>

问题

这种方法可以吗？我怎样才能实现我的目标？

如果我应该提供更多信息，请告诉我

非常感谢

【问题讨论】：

标签： css angular responsive-design flexbox angular-material

【解决方案1】：

我会摆脱内联样式并将其变成一个类，这样它就更干净了。它应该看起来像这样：

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>

祝你好运！

【讨论】：