Question

我正在尝试在容器中显示卡片（divs）并将其放在中间。我使用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或{{ 1}}？

python的跨浏览器兼容性不及php，因此对我来说仍然不是一个好选择。谢谢！

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>

弹性网格对齐

1 个答案: