*ngFor flexbox 行方向答案

【问题标题】：*ngFor flexbox row direction*ngFor flexbox 行方向
【发布时间】：2020-04-14 18:50:21
【问题描述】：

在 Angular 5 中，*ngFor 以列方向而不是行方向生成 <div> 元素：

html：

    <div class="charts"  *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn"
          style="padding-top: 0.5em">
          <div class="item">
            <span style="background-color: rgb(127, 140, 255); height:120px;"> number {{i}}
            </span>
          </div>
    </div>

css：

    .charts{
      display: flex;
     flex-direction: row;
    }

    .item{
      display: flex;
      flex: 1
    }

如何将其更改为所有元素都在同一行中？

谢谢

【问题讨论】：

标签： angular flexbox ngfor

【解决方案1】：

你应该重新排列

<div class="charts" style="padding-top: 0.5em">
      <div class="item" *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn">
        <span style="background-color: rgb(127, 140, 255); height:120px;"> number {{i}}
        </span>
      </div>
</div>

display: flex; flex-direction: row; 应该在父 div 上

【讨论】：

谢谢，我做到了，第二步是控制每行有多少'span'。我希望每行有 2 个“跨度”。我设置了 'flex-basis:50%' 它不起作用
我添加到 'item' 'flex-basis:50%' 和 'flex-wrap: wrap;'它不起作用
@larryckey：看看stackoverflow.com/questions/29546550/flexbox-4-items-per-row。看看flex: 0 1 calc(20% - 8px);。一个小演示代码plnkr.co/edit/f6s8D3JB4pplLUjk?open=lib%2Fscript.js.
谢谢，你的例子帮助了我，我做了一些改动，一切都很好，谢谢
@larryckey：太棒了！

【解决方案2】：

您需要将*ngFor 添加到您的item，而不是charts：

<div class="charts" style="padding-top: 0.5em">
  <div class="item" *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn">
    <span style="background-color: rgb(127, 140, 255); height:120px;">
      number {{i}}
    </span>
  </div>
</div>

_{附带说明，不要使用这样的内联样式。那些需要移动到组件 css 文件中}

【讨论】：