带有 ngFor 的 Angular 7 flexbox答案

【问题标题】：Angular 7 flexbox with ngFor带有 ngFor 的 Angular 7 flexbox
【发布时间】：2019-10-18 02:23:24
【问题描述】：

我正在尝试在 ngFor 循环中使用 flexbox 来获取列中的数据。 Flexbox wrap 属性打开以在较小的屏幕上显示数据。但即使在更大的屏幕上，数据也会成行显示。我的代码是

<div class="main" *ngFor="let hero of heros">
  <div class="child"><mat-checkbox color='primary'>{{hero.name}}</mat-checkbox></div>
</div>

css 是

.main {
    width: 90%;
    list-style-type: none;
    margin: 0.5em;
    padding: 0.5em;
    display: flex;
    flex-wrap: wrap;
}

.child {
    width: 400px;
}

英雄对象是

heros = [
    {id: 1, name: 'Superman'},
    {id: 2, name: 'Batman'},
    {id: 5, name: 'BatGirl'},
    {id: 3, name: 'Robin'},
    {id: 4, name: 'Flash'}
  ];

【问题讨论】：

.child{display:inline-block}
试试flex-wrap: nowrap; ?

标签： css angular flexbox angular7 ngfor

【解决方案1】：

首先，将 ngFor 移动到子元素中，不要重复主容器

<div class="main" >
  <div class="child" *ngFor="let hero of heros"><mat-checkbox color='primary'>{{hero.name}}</mat-checkbox></div>
</div>

其次，在css中将flex-wrap改为no-wrap

.main {
    width: 90%;
    list-style-type: none;
    margin: 0.5em;
    padding: 0.5em;
    display: flex;
    flex-wrap: no-wrap;
}

.child {
    width: 400px;
}

你会看到水平线上的元素，如下图所示

【讨论】：

【解决方案2】：

你确实是个小错误。您将类 main 设置在错误的位置。试试这个：

// html
<div class="main">
  <div *ngFor="let hero of heros">
  <div class="child">
    {{hero.name}}
  </div>
</div>
</div>


// css
.main {
    width: 90%;
    list-style-type: none;
    margin: 0.5em;
    padding: 0.5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background: red;
}

.child {
    width: fit-content;
    max-width: 100%;
    background: blue;
    margin: 1% 0px;

}

这将清楚地展示事物的渲染方式。

【讨论】：

【解决方案3】：

尝试使用媒体查询。

.main {
    width: 90%;
    list-style-type: none;
    margin: 0.5em;
    padding: 0.5em;
    display: flex;
}

.child {
    width: 400px;
}


/* On screens that are 768 or less */
@media screen and (max-width: 768px) {
  .main {
    width: 90%;
    list-style-type: none;
    margin: 0.5em;
    padding: 0.5em;
    display: flex;
    flex-wrap: wrap;
}

.child {
    width: 400px;
}

}

【讨论】：