css - flex 网格对齐

Question

我试图在容器中显示卡片 (div) 并将它们放在中心。我使用 display:flex 和 justify-content:space-around。效果很好，但在我下面给出的示例中，卡片必须连续 4 张:

#container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  justify-content: space-around;
  border: 1px red solid;
}
#container .card {
  flex-basis: 23%;
  background: yellow;
}

<div id="container">
  <div class="card">
  Card 1
  </div>
  <div class="card">
  Card 2
  </div>
  <div class="card">
  Card 3
  </div>
  <div class="card">
  Card 4
  </div>
  <div class="card">
  Card 1
  </div>
  <div class="card">
  Card 2
  </div>
  <div class="card">
  Card 3
  </div>
  <div class="card">
  Card 4
  </div>
  <div class="card">
  Card 3
  </div>
  <div class="card">
  Card 4
  </div>
</div>

如何将最后一张卡片向左对齐以及如何以最正确的方式执行此操作，还要记住我在 python< 中的 for 循环中显示卡片 或 php?

display:grid 不像 display:flex 那样跨浏览器兼容，因此对我来说仍然不是一个好的选择。谢谢!

Answer 1

在那种情况下不需要证明内容。以相等的边距将内容居中。

#container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px red solid;
}
#container .card {
  flex-basis: 20%;
  margin-right: 2.5%;
  margin-left: 2.5%;
  background: yellow;
}

<div id="container">
  <div class="card">
  Card 1
  </div>
  <div class="card">
  Card 2
  </div>
  <div class="card">
  Card 3
  </div>
  <div class="card">
  Card 4
  </div>
  <div class="card">
  Card 1
  </div>
  <div class="card">
  Card 2
  </div>
  <div class="card">
  Card 3
  </div>
  <div class="card">
  Card 4
  </div>
  <div class="card">
  Card 3
  </div>
  <div class="card">
  Card 4
  </div>
</div>