如何让2个Angular Material卡片横向并排显示？

这个问题很常见，Angular Material的卡片（以及内部嵌套的组件）默认是块级元素，所以会自动垂直排列。咱们可以用几种简单的方法实现横向并排，这里给你推荐几个实用方案：

方案1：纯CSS Flex布局（无需额外依赖） #

这是最直接的方法，只需要给卡片的父容器添加Flex样式即可：

修改后的HTML代码 #

<mat-card id="moth-card">
  <mat-card-title>Live Stats</mat-card-title>
  <!-- 新增一个容器包裹两个卡片 -->
  <div class="card-row">
    <app-card></app-card>
    <app-card></app-card>
  </div>
</mat-card>

组件内添加CSS样式 #

.card-row {
  display: flex;
  gap: 1rem; /* 控制两个卡片之间的间距 */
  flex-wrap: wrap; /* 响应式适配：屏幕变小时自动换行 */
}

.card-row app-card {
  flex: 1; /* 让两个卡片平分父容器的可用宽度 */
  min-width: 280px; /* 设置最小宽度，避免卡片在小屏幕上挤得太窄 */
}

这个方案的优势是轻量、灵活，不需要引入任何额外库，适合大多数场景。

方案2：使用Angular Material的Grid列表组件 #

如果你的项目已经在使用Angular Material的布局组件，用mat-grid-list会更符合Material设计规范：

第一步：导入必要模块 #

先在你的模块（比如app.module.ts）中导入MatGridListModule和MatGridTileModule：

import { MatGridListModule } from '@angular/material/grid-list';
import { MatGridTileModule } from '@angular/material/grid-list';

@NgModule({
  imports: [
    // ...其他模块
    MatGridListModule,
    MatGridTileModule
  ]
})
export class AppModule { }

修改后的HTML代码 #

<mat-card id="moth-card">
  <mat-card-title>Live Stats</mat-card-title>
  <mat-grid-list cols="2" gutterSize="1rem" rowHeight="auto">
    <mat-grid-tile>
      <app-card></app-card>
    </mat-grid-tile>
    <mat-grid-tile>
      <app-card></app-card>
    </mat-grid-tile>
  </mat-grid-list>
</mat-card>

• cols="2"：指定分为2列
• gutterSize="1rem"：设置列之间的间距
• rowHeight="auto"：让行高自适应卡片内容

这个方案适合需要更复杂网格布局的场景，比如后续要扩展成多列排列。

方案3：使用Angular Flex-Layout（可选） #

如果你已经引入了@angular/flex-layout库，可以用它的指令快速实现响应式布局：

HTML代码 #

<mat-card id="moth-card">
  <mat-card-title>Live Stats</mat-card-title>
  <div fxLayout="row" fxLayoutGap="1rem" fxLayoutWrap>
    <app-card fxFlex="1 1 280px"></app-card>
    <app-card fxFlex="1 1 280px"></app-card>
  </div>
</mat-card>

• fxLayout="row"：设置横向排列
• fxLayoutGap="1rem"：添加间距
• fxFlex="1 1 280px"：设置卡片的弹性比例和最小宽度

这个方案适合已经在项目中使用Flex-Layout的团队，指令式的写法更简洁。

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