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

您会在这里找到堆积如山的炸弹：https://stackblitz.com/edit/angular-3u4sep

预先感谢您的帮助！

Answer 1

如果您希望不同大小的子项具有相同的宽度，则必须为所有子项设置相同的grow属性。您可以通过向div中添加fxFlex="1"（或仅添加fxFlex）来实现此目的：

<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

由于每个数组元素的内容长度都不相同，因此根据其内容长度占用空间。将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不起作用？

2 个答案: