如何在每行显示 2 张卡片？答案

【问题标题】：How to display 2 cards on each row?如何在每行显示 2 张卡片？
【发布时间】：2021-03-15 05:31:21
【问题描述】：

我在一个容器中有 5 张卡片，我试图在每行显示两张卡片。我尝试了下面的代码，但它在每一行都给出了一张卡片。如何解决这个问题？

HTML

  <div id="cards-container">
    <ion-card>
      <ion-img src="../../../../../../assets/sample.jpg"></ion-img>
    </ion-card>
    <ion-card>
      <ion-img src="../../../../../../assets/sample.jpg"></ion-img>
    </ion-card>
    <ion-card>
      <ion-img src="../../../../../../assets/sample.jpg"></ion-img>
    </ion-card>
    <ion-card>
      <ion-img src="../../../../../../assets/sample.jpg"></ion-img>
    </ion-card>
    <ion-card>
      <ion-img src="../../../../../../assets/sample.jpg"></ion-img>
    </ion-card>
  </div>

SCSS

#cards-container {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  ion-card {
    margin: 5px;
    width: 50%;
  }
}

【问题讨论】：

如果你使用离子框架，为什么不使用离子网格呢？ ionicframework.com/docs/api/grid
我试过了，但我用 for 循环渲染卡片，这意味着索引 0 和 1 的卡片应该在第 0 行，索引 2 和 3 应该在第 1 行。我必须为这和 flex 更容易，因为它直接包装卡片，所以我不需要构建任何逻辑，单个 for 循环就足够了。但是，如果您有任何更简单的 ion-grid 解决方案，请告诉我，我会考虑实施它。
您使用的是哪个离子版本？
@huanfeng 最新版本。
最新版本应该可以满足您的要求。不需要为此做任何逻辑。它应该像这样工作。如果您遇到任何问题，请通过代码示例告诉我们。

标签： html css ionic-framework flexbox

【解决方案1】：

模板：

<div id="cards-container">
  <ion-card>
    <ion-img src="https://via.placeholder.com/150"></ion-img>
  </ion-card>
  <ion-card>
    <ion-img src="https://via.placeholder.com/150"></ion-img>
  </ion-card>
  <ion-card>
    <ion-img src="https://via.placeholder.com/150"></ion-img>
  </ion-card>
  <ion-card>
    <ion-img src="https://via.placeholder.com/150"></ion-img>
  </ion-card>
  <ion-card>
    <ion-img src="https://via.placeholder.com/150"></ion-img>
  </ion-card>
</div>

SCSS：

#cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  ion-card {
    margin: 5px 0;
    width: calc(50% - 15px);
  }
}

【讨论】：

如果我想要一些 5px 的边距并且宽度可以根据那个更小呢？
可以，您可以尝试自己控制。如果你明天还有这样的问题，我会帮你的:)
如何控制？
查看更新后的答案，使用 calc(50% - 10px) 应该很容易控制。
是的，它运行良好。但是卡片的间距不均匀。卡片之间的间隙是边界和卡片之间的间隙的两倍。有什么办法可以解决吗？

【解决方案2】：

添加flex-direction: row; 并删除margin: 5px;。您可以使用flex-basis 而不是孩子的“宽度”

#cards-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly; //give flex-start to align items to the left of flexbox

}
div {
  // margin: 5px;
  flex-basis: 50%;
}

img{
   width: 100px;
   height: 100px;
}

<div id="cards-container">
    <div>
      <img src="https://picsum.photos/id/100/500/300"/>
    </div>
    <div>
      <img src="https://picsum.photos/id/100/500/300"/>
    </div>
    <div>
      <img src="https://picsum.photos/id/100/500/300"/>
    </div>
    <div>
      <img src="https://picsum.photos/id/100/500/300"/>
    </div>
    <div>
      <img src="https://picsum.photos/id/100/500/300"/>
    </div>
  </div>

【讨论】：

每行仍然有一张卡片，并且该卡片在行的中心对齐。
@MayankKataria 您能否查看编辑后的代码并尝试为您的代码重现相同的代码。
我不想要sn-p所示的效果。