如何使 div 中的 flexbox 具有 2 列与 mat-chips/angular material2 的 ngFor？

Posted 2023-03-06

【中文标题】如何使 div 中的 flexbox 具有 2 列与 mat-chips/angular material2 的 ngFor？

【英文标题】：How to make a flexbox in a div to have 2 columns with ngFor of mat-chips/angular material2?

【发布时间】：2018-09-19 11:30:56

【问题描述】：

我有一个包含 10 个条目的水果列表。我想让它使水果名称文本（在 mat-chip 旁边）显示在两列中，每列 5 个。我使用的芯片在这里：https://material.angular.io/components/chips/api

我的 CSS：

.flexp 
    display: flex;
    flex-wrap:wrap;


.flexc 
    flex-grow: 1;
    display: inline-block;

html

       <div class="flexp" *ngFor="let fruit of fruits">
              <div class="flexc">
                <mat-chip>
                  fruit.typeOfFruit
                </mat-chip>
                fruit.name
              </div>
          </div>

我该怎么做？现在我的 flexbox 是从上到下的。

我想让它看起来像一张桌子，但不必创建结构。如果有办法让 ngFor 足够聪明，让它以这种方式显示......这就是我正在寻找的：

<table>
<tr>
<td>Fruit 1</td><td>Fruit 6</td>
<td>Fruit 2</td><td>Fruit 7</td>
<td>Fruit 3</td><td>Fruit 8</td>
<td>Fruit 4</td><td>Fruit 9</td>
<td>Fruit 5</td><td>Fruit 10</td></tr>
</table>

如果不能，请说明。

【问题讨论】：

假设您的一位客户连续重复 12 次。每行包含 1 列。每一列都包含他们实际想要重复的项目。你会告诉你的客户什么？

我不明白你的意思，我希望它看起来像一个不编码表格的表格。

flexbox 应该让一个 flex 父级的多个子级遵循一些对齐和分布规则。您有 12 个父母，每个父母有 1 个孩子，而不是在一个父母中拥有 12 个孩子。您要么将 flex 应用于父母的父母，要么将 *ngFor 应用于 .flexc。我会亲自将.flexc 扔掉（如果您仅针对这种情况进行编码）并简单地重复<mat-chip>s。

所以我的问题是我想与fruit.name并排显示的mat-chip ...当将*ngFor放在mat-chip上时，它看起来很有趣

我相信style="display: inline-block;" 会覆盖.flexp 中的display: flex;。所以你认为你在使用 flexbox，但实际上并没有。

【参考方案1】：

我假设您作为示例提供的表格代码是错误的，因为您提到您想要 2 列 5 行，这相当于这个。下面的答案是有一个类似于这里的表格的显示

<table>
<tr><td>Fruit 1</td><td>Fruit 6</td></tr>
<tr><td>Fruit 2</td><td>Fruit 7</td></tr>
<tr><td>Fruit 3</td><td>Fruit 8</td></tr>
<tr><td>Fruit 4</td><td>Fruit 9</td></tr>
<tr><td>Fruit 5</td><td>Fruit 10</td></tr>
</table>

如果要使用flex，需要将flow-direction设置为column，并在容器上有一个max-height，等于行高度的5倍

scss

$rowHeight: 40px;
.flexp 
    display: flex;
    flex-wrap:wrap;
    flex-direction: column;
    max-height: calc(5 * #$rowHeight);


.flexc 
    height: $rowHeight;
    flex-grow: 1;
    display: inline-block;

html

<mat-chip-list>
    <div class="flexp">
     <div class="flexc" *ngFor="let fruit of fruits">

        <mat-chip>
          fruit.typeOfFruit
        </mat-chip>
        fruit.name
      </div>
    </div>
</mat-chip-list>

其他不使用 flex 的解决方案

您可以使用column-count 属性

scss

$rowHeight: 40px;
.fruitContainer 
    column-count: 2;
    max-height: calc(5 * #$rowHeight);


.fruit 
    height: $rowHeight;

html

<mat-chip-list>
    <div class="fruitContainer">
     <div class="fruit" *ngFor="let fruit of fruits">
        <mat-chip>
            fruit.typeOfFruit
                    </mat-chip>
                    fruit.name
    </div>

</div>
</mat-chip-list>

Stackblitz demo

下面是结果

【讨论】：

我喜欢这个解决方案真正的 flexbox 和细节。

【参考方案2】：

MatGridList 正是出于这个原因。

<mat-grid-list cols="2" rowHeight="48px">
    <mat-grid-tile *ngFor="let fruit of fruits">
        <div class="flexc">
            <mat-chip>
                fruit.typeOfFruit
            </mat-chip>
            fruit.name
        </div>
    </mat-grid-tile>
</mat-grid-list>

见stackblitz example。

【讨论】：

我喜欢这个解决方案的简单性。

【参考方案3】：

您可以使用 CSS columns 在包含元素中定义自适应列布局。比如……

#container 
    -webkit-columns: 2 200px;
    -moz-columns: 2 200px;
    columns: 2 200px;

第一个值 (2) 声明列数，第二个值 (200px) 声明它们的最小宽度，这样如果容器不够宽，浏览器会折叠列。供应商前缀可能不是绝对必要的，但仍建议使用。

有关更多信息，请参阅此 CSS-Tricks 帖子，该帖子还涉及列装订线等。

:)

【参考方案4】：

将您的 CSS 更改为 this 将按您喜欢的顺序包装它，但不是按那个顺序。方向是ltr。

.flexp 
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;


.flexc 
    width: 50%;

【参考方案5】：

你也可以这样试试..

CSS

  .flexp 
   column-count: 2;
   column-gap: 200px;
   width: 300px;
   

  .flexc 
   display: inline-block;
   width: 160px;
   text-align: left;
   border: 1px solid white;
   

HTML：

 <div class="flexp">
   <div class="flexc" *ngFor="let fruit of fruits">
      <mat-chip>
        fruit
      </mat-chip>
   </div>
 </div>