Angular：Flex-Layout 为什么我的 <div> 的宽度和 fxLayoutAlign 不工作？

Question

我有一个由 3 个元素组成的数组，由标题及其各自的内容组成。我正在尝试遍历数组以生成 DOM 中的 s 列表，理想情况下该列表的宽度相同并且彼此之间均匀间隔。

这是我的 TS 数组：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  list= [
    {title: 'T1 - Lorem ipsum, this a test, just a test', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'},
    {title: 'T2 - Lorem ipsum, this a test, just a test', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'},
    {title: 'T3 - Lorem ipsum, this a test, just a test', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'},
  ];
}

和对应的HTML文件：

<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly">
  <div *ngFor="let el of list">
    <div class="title">{{ el.title }}</div>
    <div class="content">{{ el.content }}</div>
  </div>
</div>

<br>
<br>

<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly">
  <div style="background-color: orange">Test1</div>
  <div style="background-color: lightgreen">Test2</div>
  <div style="background-color: lightblue">Test3</div>
</div>

为了这个例子，你会看到我有一个布局的第二部分，其中有一个 <div> 的列表的例子，宽度均匀，并且在 HTML（包含测试 1、2 和 3 的部分）。

你会在这里找到一个 stackblitz：https://stackblitz.com/edit/angular-3u4sep

在此先感谢您的帮助！

Answer 1

如果您希望不同大小的子项具有相同的宽度，则必须为所有子项设置相同的增长属性。您可以通过将 fxFlex="1"（或只是 fxFlex）添加到 div 来实现：

<div *ngFor="let el of list" fxFlex>
  <div class="title">{{ el.title }}</div>
  <div class="content">{{ el.content }}</div>
</div>

现在所有的 div 都有相同的增长（和收缩）比率，所以宽度将被平均分配。有关 fxFlex 属性 here.

的更多信息

您的 "TestN" 文本具有相同的宽度，这就是为什么它们是均匀的。

Answer 2

由于每个数组元素的内容长度不一样，所以根据内容长度取space。将 fxFlex 添加到子 div 中，它应该可以工作。

<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-around">
  <div *ngFor="let el of list" fxFlex>
    <div class="title">{{ el.title }}</div>
    <div class="content">{{ el.content }}</div>
  </div>
</div>

Angular：Flex-Layout 为什么我的 <div> 的宽度和 fxLayoutAlign 不工作？

Angular: Flex-Layout why are my <div>s not even in width and fxLayoutAlign not working?

angular-flex-layout

angular