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

Question

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

背景

我正在使用 Angular Material (v7) 组件构建一个 Angular 7 应用程序。

在 Material 卡片标题中，例如：

Objective

我希望图标靠右，文字靠左。所以，无论元素的宽度是多少，它们都会粘在每一边。

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

|-----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|

此外，如果由于宽度较小而需要中断，我希望两个图标（按钮元素）都保持 side-by-side。

到目前为止

我尝试了几种方法，将这种 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>

问题

这个方法可以吗？我怎样才能完成我的 objective?

让我知道是否需要提供更多信息

非常感谢

Answer 1

我会去掉内联样式，将其设为 class，这样更简洁。它应该看起来像这样：

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>

祝你好运！

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

Sticking flexbox elements to each side of container (one element to the left, the other to the right)

css

flexbox

responsive-design

angular-material

angular