用FLEX布局，做如下效果，浏览器窗口最大时，项目显示为2列3行，浏览器窗口缩小后，项目按垂直方向显示为1列。浏览器窗口最大时显示，浏览器窗口缩小显示，将进酒静夜思

使用Flexbox布局可以轻松实现您描述的效果。 Flex布局允许我们基于容器的尺寸动态调整元素排列。首先，我们需要设置包含项目的容器`display: flex;`，并指定`flex-wrap: wrap;`以便在空间不足时换行。

当浏览器窗口最大化时（窗口宽度足够大），我们可以设置容器的`flex-direction: row;`，让项目水平排列成两列三行：

<div class="container">
  <!-- 项目列表 -->
  <div class="item">进酒</div>
  <div class="item">静夜思</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  /* 添加其他布局样式如 justify-content 和 align-items */
}
.item {
  /* 如果需要，可以添加固定宽度和高度 */
}
</style>

当浏览器窗口缩小时（宽度不足以维持两列），我们将`flex-direction`设为`column`，项目会按垂直顺序堆叠：

@media (max-width: some-breakpoint) {
  .container {
    flex-direction: column;
  }
}

在这个例子中，“some-breakpoint”是一个自定义的媒体查询条件，可以根据实际需要调整。