如何实现ion-cards横向排列而非垂直堆叠？

当然可以！要把ion-cards从默认的垂直堆叠改成横向并排，有几个实用的方案，根据你的需求选就行：

1. 用Ionic内置网格系统（最推荐，响应式友好） #

Ionic的ion-grid、ion-row、ion-col是专门做布局的，用它们来排列卡片适配性超强，自动适配手机、平板等不同屏幕。

示例代码：

<ion-grid>
  <ion-row>
    <!-- 一行放3个卡片，每个占4份（总共12份） -->
    <ion-col size="4">
      <ion-card>
        <ion-card-header>
          <ion-card-title>卡片1</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          这是第一张横向排列的卡片
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col size="4">
      <ion-card>
        <ion-card-header>
          <ion-card-title>卡片2</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          这是第二张横向排列的卡片
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col size="4">
      <ion-card>
        <ion-card-header>
          <ion-card-title>卡片3</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          这是第三张横向排列的卡片
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

• 调整size属性就能改变一行的卡片数量：比如size="6"就是一行2个，size="3"就是一行4个。
• 还可以加size-sm、size-md这类响应式属性，让不同屏幕下的排列方式不一样。

2. 用CSS Flexbox自定义布局 #

如果不想用网格，直接给卡片容器加Flexbox样式，自由度更高，适合需要横向滚动的场景：

先写HTML结构：

<div class="horizontal-cards">
  <ion-card>
    <ion-card-header>
      <ion-card-title>卡片A</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      自定义横向排列的卡片
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      <ion-card-title>卡片B</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      支持横向滚动的卡片
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      <ion-card-title>卡片C</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      更多卡片也能轻松容纳
    </ion-card-content>
  </ion-card>
</div>

然后添加CSS：

.horizontal-cards {
  display: flex;
  gap: 1rem; /* 卡片之间的间距，可自定义 */
  overflow-x: auto; /* 卡片超出容器时，允许横向滚动 */
  padding: 0.5rem;
}

.horizontal-cards ion-card {
  flex: 0 0 auto; /* 禁止卡片被压缩变形，保持固定宽度 */
  width: 280px; /* 自定义卡片宽度 */
}

• 去掉overflow-x: auto的话，卡片会挤在一行里（如果容器宽度够的话），适合卡片数量少的情况。

3. 用ion-slides实现滑动式横向卡片 #

如果想要卡片支持左右滑动切换，用Ionic的ion-slides就很方便，自带滑动交互：

<ion-slides slidesPerView="auto" spaceBetween="16">
  <ion-slide>
    <ion-card>
      <ion-card-header>
        <ion-card-title>滑动卡片1</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        左右滑动查看更多
      </ion-card-content>
    </ion-card>
  </ion-slide>
  <ion-slide>
    <ion-card>
      <ion-card-header>
        <ion-card-title>滑动卡片2</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        自带滑动动画
      </ion-card-content>
    </ion-card>
  </ion-slide>
  <ion-slide>
    <ion-card>
      <ion-card-header>
        <ion-card-title>滑动卡片3</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        适配移动端体验
      </ion-card-content>
    </ion-card>
  </ion-slide>
</ion-slides>

• slidesPerView="auto"让卡片自适应宽度，也可以设成具体数字比如slidesPerView="2"，控制一行显示的卡片数。
• spaceBetween用来设置卡片之间的间距。

根据你的场景选就行，一般优先用网格系统，省心又适配好；需要滚动或者自定义就用Flexbox；要滑动交互就用ion-slides~

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