html - 如何在单个 ionic 行中制作可滚动的 ionic 列

Question

下图供引用。如何水平对齐所有按钮并使其水平滚动？因此所有按钮都是水平对齐的，没有一个垂直对齐

HTML

    <!-- ITEMS (BOLLEN) VAN GESELECTEERDE AREA -->
    <ion-row scrollX="true" class="scroll-items">
      <ion-col size="3" *ngFor="let item of selectedArea.Items">
        <!-- Items -->
        <ion-button class="item-fab" (click)="selectItem(item)">
          <ion-label class="ion-text-wrap">{{
            item.Descriptions[0].Description
          }}</ion-label>
        </ion-button>
        <ion-button>Test</ion-button>
        <ion-button>Test</ion-button>
        <ion-button>Test</ion-button>
        <ion-button>Test</ion-button>
        <ion-button>Test</ion-button>
        <ion-button>Test</ion-button>
      </ion-col>
    </ion-row>
    <!-- EINDE ITEMS -->

CSS

.scroll-items {
  justify-content: center;
  align-items: ;
  flex-wrap: nowrap;
  overflow-x: scroll !important;
  overflow-y: hidden;
}

Answer 1

如果从 ion-col 中删除尺寸属性，它将调整为所需的宽度。然后将 col 设置为使用 display: flex 和 nowrap 来实现您可能想要的效果。滚动是由行对齐中心启动的，因此我将其更改为 flex-start。

这对我有用:

HTML

<!-- ITEMS (BOLLEN) VAN GESELECTEERDE AREA -->
<ion-row scrollX="true" class="scroll-items">
  <ion-col *ngFor="let item of selectedArea.Items">
    <!-- Items -->
    <ion-button class="item-fab" (click)="selectItem(item)">
      <ion-label class="ion-text-wrap">{{
        item.Descriptions[0].Description
      }}</ion-label>
    </ion-button>
    <ion-button>Test</ion-button>
    <ion-button>Test</ion-button>
    <ion-button>Test</ion-button>
    <ion-button>Test</ion-button>
    <ion-button>Test</ion-button>
    <ion-button>Test</ion-button>
  </ion-col>
</ion-row>
<!-- EINDE ITEMS -->

CSS

.scroll-items {
  justify-content: flex-start; // changed
  flex-wrap: nowrap;
  overflow-x: scroll !important;
  overflow-y: hidden;
}
.scroll-items ion-col { // added
    display: flex;
    flex-wrap: nowrap;
}