中间有大图像，周围有较小的图像，使用Flexbox。

使用Flexbox布局可以很容易地实现中间有大图像，周围有较小图像的效果。以下是一个简单的示例代码：

HTML代码：

<div class="container">
  <div class="small-image"></div>
  <div class="small-image"></div>
  <div class="big-image"></div>
  <div class="small-image"></div>
  <div class="small-image"></div>
</div>

CSS代码：

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

.small-image {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
}

.big-image {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 10px;
}

上述代码中，.container是包含所有图像的容器，通过display: flex将其设置为Flex容器。justify-content: center和align-items: center用于在容器中居中对齐所有图像。flex-wrap: wrap允许图像在需要时换行。

.small-image和.big-image分别表示较小图像和大图像的样式。在示例中，我们使用了红色和蓝色的背景色来区分它们。

这样，当浏览器窗口足够宽时，Flex容器会尝试将所有图像在一行中居中对齐。当浏览器窗口变窄并且无法容纳所有图像时，Flex容器会自动换行，并尽可能保持图像的居中对齐。