代码之家 › 专栏 › 技术社区 › Hasan Zubairi

带ngFor的7角挠性箱

ngfor angular7 flexbox angular css

0

Hasan Zubairi · 技术社区 · 6 年前

我试图在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对象是

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

3 回复 | 直到 6 年前

1

Shadab Faiz 6 年前

你犯了个小错误。你设定了班级 主要的 在错误的地方。试试这个:

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

}

这将清楚地说明事物是如何呈现的。

2

0

Argon 6 年前

尝试使用媒体查询。

.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;
}

}

3

0

Chiáº¿n Nghê 6 年前

首先,将ngFor移动到子元素,它不应该重复主容器

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

第二,换成 flex-wrap 到 no-wrap 在css中

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

.child {
    width: 400px;
}

您将看到水平线中的元素,如下图所示