Angular: Flex-Layout 为什么我的 <div> 宽度甚至都没有并且 fxLayoutAlign 不起作用？答案

【问题标题】：Angular: Flex-Layout why are my <div>s not even in width and fxLayoutAlign not working?Angular: Flex-Layout 为什么我的 <div> 宽度甚至都没有并且 fxLayoutAlign 不起作用？
【发布时间】：2019-08-23 14:53:31
【问题描述】：

我有一个由 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>s 列表的示例，即使在宽度上并且在 HTML 中均匀间隔（带有 Test1 的部分， 2 和 3)。

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

提前感谢您的帮助！

【问题讨论】：

标签： angular angular-flex-layout

【解决方案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”文本具有相同的宽度，这就是为什么它们是均匀的。

【讨论】：

感谢 Parziphal！ fxLayoutAlign="space-evenly" 不起作用怎么办？
哦，是的......原来space-evenly 和其他值适用于放置孩子后剩余的可用空间，但在这种情况下没有剩余空间。我建议先了解 Flexbox（在纯 CSS 中），然后再了解这个或任何其他 flexbox 库。任何这样的疑问都应该用 Flexbox 的行为而不是库的行为来检查（这就是我所做的）。
感谢您的帮助@Parziphal

【解决方案2】：

由于每个数组元素的内容长度不同，因此根据其内容长度占用空间。将fxFlex 添加到子divs，它应该可以工作。

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

【讨论】：