将离子卡与柔性端对齐

Question

我尝试使用 align-item: flex-end 使离子卡从页面底部开始，但它没有影响。

这是代码：

    <div class="align-page">
    <div class="first-section">
      <ion-chip [outline]="true" class="selected">One</ion-chip>
      <ion-chip class="not-selected">Two</ion-chip>
      <ion-chip class="not-selected">Three</ion-chip>
    </div>

    <div class="second-section">
      <ion-card>
        <ion-card-content>
          <ion-card-subtitle>hi</ion-card-subtitle>
          <ionc-item>
            <ion-row style="height: 10px"></ion-row>
          </ionc-item>
        <ion-card-content>

    </div> 
</div>

.align-page{
  display: flex;
  flex-direction: column;
  align-item: flex-end;
}

Answer 1

将 flex-direction:column 替换为

证明内容：flex-end；

该列是一个弹性容器

但你必须证明也满足于结束。 justify-content 的默认值为 strech。 希望它有效。