如何让卡片Div水平均匀分布并填满容器宽度？

我用一个div容器容纳多张卡片，目前通过display: inline-block实现排列，但当容器宽度不足以放下新卡片时，右侧会出现多余空白。希望不改变卡片统一尺寸的前提下，动态调整卡片间的margin，让卡片在水平轴上居中且均匀分布。

当前基于Angular开发，相关代码如下：

SASS代码 #

.card-container
    width: 90%
    margin-left: auto
    margin-right: auto
    padding: 5px

.card
    vertical-align: middle
    display: inline-block
    margin: 10px
    padding: 5px 10px 5px 10px
    border-style: solid
    border-width: 1px
    border-radius: 2.5px

.name
    margin: 5px 0 10px 0
    display: block
    text-align: center

img
    width: 245px
    height: 342px

HTML代码 #

<div *ngIf='loaded'>
    <div class="card-container">
        <div defer class="card" *ngFor="let poke of list; index as i;">
            <div class="name">{{list[i]["name"]}}</div>
            <img src="{{list[i]['images']['small']}}">
        </div>
    </div>
</div>

TypeScript代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.sass']
})
export class ContentComponent {
  list = [];
  item1: any;
  loaded = false;
  constructor() {
    fetch('https://api.pokemontcg.io/v2/cards?q=name:charizard', {
      headers: {
        "X-Api-Key": "APIKEY",
      }
    })
    .then((res) => res.json())
    .then((data) => {
      this.list = data.data;
      console.log(this.list);
      this.loaded = true;
    })
    .catch((err) => console.error(err));
  }
}

试过多种display属性，inline-block最接近需求，但不确定table-layout是否适用。想问仅用CSS/HTML能不能实现这个需求？

完全可以用纯CSS实现，推荐用Flexbox布局，比inline-block更适配你的需求，步骤如下：

1. 修改容器样式为Flex布局 #

.card-container
    width: 90%
    margin-left: auto
    margin-right: auto
    padding: 5px
    display: flex
    flex-wrap: wrap
    justify-content: center
    gap: 20px  /* 替代margin，统一控制卡片间的水平/垂直间距 */

2. 调整卡片的margin设置 #

因为Flex的gap已经负责控制间距，把卡片原来的全局margin改成仅保留上下方向的间距（如果需要的话）：

.card
    vertical-align: middle
    /* 移除display: inline-block，Flex子元素默认是block类型 */
    margin: 10px 0  /* 只保留上下margin，左右间距由gap控制 */
    padding: 5px 10px 5px 10px
    border-style: solid
    border-width: 1px
    border-radius: 2.5px

方案说明 #

• flex-wrap: wrap：让卡片在容器宽度不足时自动换行
• justify-content: center：让每一行的卡片自动水平居中，彻底解决右侧留白问题
• gap：精准控制卡片间的间距，比margin更稳定，不会出现换行后间距错乱的情况
• 完全保留卡片的固定尺寸，符合你的核心需求

如果需要兼容旧浏览器（不支持gap），可以替换成justify-content: space-evenly，同时调整卡片margin：

.card-container
    /* ...其他样式 */
    display: flex
    flex-wrap: wrap
    justify-content: space-evenly

.card
    margin: 10px
    /* ...其他样式 */

另外，table-layout不太适合这个场景，它是基于表格的布局，灵活性远不如Flex，没法很好地处理换行后的均匀分布逻辑。

内容的提问来源于stack exchange，提问作者Jacob