gpt4 book ai didi

css - 垫卡未指定行下方和上方的间隙

转载 作者:行者123 更新时间:2023-12-04 17:31:14 33 4
gpt4 key购买 nike

我试图在显示垫卡时指定两行之间的一些间隙。但是使用 flex 后显示不正常。

card flex

这是 HTML 文件:-

<div fxLayout="row wrap" fxLayoutAlign="space-around">
<mat-card class="list-card" *ngFor="let uri of urlData" fxLayoutGap="20px">
<mat-card-header>
<mat-card-title>{{uri.title}}</mat-card-title>
<mat-card-subtitle>3 weeks ago</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://uU0bbBPEJvIK7H7f4qaSuQ.jpeg(58 kB)
https://uU0bbBPEJvIK7H7f4qaSuQ.jpeg
" alt="img alt title">
<mat-card-content>
<a href="https://medium.....64" class="mat-caption">
{{uri.documentURL}} </a>
<!-- <section> -->
<mat-chip-list>
<mat-chip>Angular</mat-chip>
</mat-chip-list>
<!-- </section> -->
<p>
{{uri.description}}
</p>
</mat-card-content>
<mat-card-actions>
<mat-icon>share_outline</mat-icon>
<mat-icon>bookmark_outline</mat-icon>
</mat-card-actions>
</mat-card>
</div>

这是 css:-

.list-card{
max-width: 260px;
}

最佳答案

有两种选择

1:使用 flexLayoutGap 就像您对 row 间隙所做的那样,但是您需要自定义您的结构,如前所述 here对于底部间隙,您还需要使用 flex column

2: 在你的卡片类 .list-card 上使用 margin-bottom

.list-card{
margin-bottom: 20px;
}

关于css - 垫卡未指定行下方和上方的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59498260/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com