Angular 7 个带有 ngFor 的 flexbox
Angular 7 flexbox with ngFor
我正在尝试在 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'}
];
尝试使用媒体查询。
.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;
}
}
你确实是个小错误。您将 class 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;
}
这将清楚地显示事物的渲染方式。
首先将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;
}
您将看到水平线上的元素,如下图
我正在尝试在 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'}
];
尝试使用媒体查询。
.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;
}
}
你确实是个小错误。您将 class 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;
}
这将清楚地显示事物的渲染方式。
首先将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;
}
您将看到水平线上的元素,如下图