如何在flexbox中获得这样的布局

Question

您好我被要求在页面上创建一个看起来像附加图像的布局：

实现这一目标的最佳方法是什么？ Flexbox的？ CSS网格？

任何代码帮助都会很棒，因为不需要使用凌乱的页面构建器

由于

Answer 1

试试这个：

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: center;
}

.container > div {
  background: lightblue;
  width: 100px;
  margin: 35px;
}