网格布局对齐中心

Question

我想像下面的图像一样使用grid或flexbox创建一个网格布局，如果将项目包装到新行中，则第二行中的项目必须水平居中。

this is what I have

This is what I want (obviously perfectly centered)

Answer 1

诀窍是使用wrap和justify-content。

HTML：

<div class="wrapper">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

CSS：

.wrapper {
  display: flex;
  background: green;
  width: 150px;
  flex-wrap: wrap;
  justify-content: space-around;
}

.child {
  width: 50px;
  height: 50px;
  background: red;
}

这里是小提琴：https://jsfiddle.net/9qwa1r8u/1/

希望有帮助：-）