弹性网格对齐

豪华轿车

我正在尝试在容器中显示卡片（div），并将它们放在中间。我使用display:flex和justify-content:space-around。效果很好，但是在我下面给出的示例中，卡片总是必须连续四张：

#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>

我如何才能将最后一张卡片向左对齐以及如何以最合适的方式进行操作，同时还要牢记我正在for循环显示python或php？

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

Paran0a

在这种情况下，不需要理由内容。将内容以相等的边距居中。

#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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。