Angular Material Flex Layout - 使 div 宽度适合内容

Question

我一直在环顾四周，找到了很多答案，但似乎没有一个完全符合我的需要，我连续有几个 div，我希望左边的那些只适合他们的内容，这里是当前示例：

<div fxLayout="row wrap" style="border: 1px solid red">
  <div fxFlex style="background-color: yellow">
    foo
  </div>

  <div fxFlex  style="background-color:aquamarine">
    bar
  </div>

  <div fxFlex fxLayoutAlign="end end">
      some content that might expand to a max-width somehow
  </div>
</div>

结果如下：

如果有足够的内容，我想通过为前 2 个 div 指定最大宽度来实现类似于下图的效果，但如果内容不多，则仅使用所需的宽度，像这样：

Answer 1

尝试使用fxFlex="none"

<div fxLayout="row wrap" style="border: 1px solid red">
    <div fxFlex="none" style="background-color: yellow">
     foo
    </div>

    <div fxFlex="none"  style="background-color:aquamarine">
     bar
    </div>

    <div fxFlex fxLayoutAlign="end end">
     some content that might expand to a max-width somehow
    </div>
</div>

Answer 2

你可以试试这个：

  <div fxLayout="row wrap" style="border: 1px solid red">
    <div fxFlex="0 0" style="max-width: 40px; background-color: yellow">
      foo
    </div>

    <div fxFlex="0 0" style="max-width: 40px; background-color:aquamarine">
      bar
    </div>

    <div fxFlex fxLayoutAlign="end end">
      some content that might expand to a max-width somehow
    </div>
  </div>

https://stackblitz.com/edit/angular-ivy-9ywiaq?file=src%2Fapp%2Fapp.component.html

要使它们不增长或缩小，您可以使用以下命令：

fxFlex="0 0"

https://github.com/angular/flex-layout/wiki/Declarative-API-Overview

对于最大宽度，您可以使用相同的 css 属性：

max-width: 40px;