使用Flexbox时缩小浏览器Div无法垂直堆叠的问题求助

你的代码核心问题是错误使用了Grid布局而非Flexbox，同时缺少响应式断点配置。当前.container和.item都设置了display: grid，导致flex-direction这类Flex属性完全不起作用，自然无法实现窗口缩小时的垂直堆叠效果。

修改方案 #

• 将.container的布局改为Flexbox，设置基础行排列
• 添加响应式断点，在窗口宽度达到阈值时切换为垂直排列
• 移除无效的Grid相关设置，简化样式

修改后的完整代码 #

CSS代码

.container {
  position: relative;
  display: flex; /* 改用flex布局 */
  justify-content: center;
  align-items: flex-start; /* 顶部对齐避免内容拉伸 */
  gap: 10px; /* 统一控制元素间距 */
  flex-wrap: wrap; /* 允许自动换行 */
}

.item {
  margin: 3px;
  padding: 10px 0 0 10px;
  width: 400px; /* 固定宽度触发换行条件 */
}

.item img {
  max-width: 100%;
  height: auto;
}

.description {
  font-family: 'Nunito', sans-serif;
  color: #000;
}

/* 响应式断点：窗口宽度小于1280px时垂直堆叠 */
@media (max-width: 1280px) {
  .container {
    flex-direction: column;
    align-items: center;
  }
}

HTML代码（保持原结构即可）

<div class="container">
  <div class="item">
    <a href="#">
      <img width="400" height="400" src="https://placekitten.com/400/400" />
    </a>
    <div class="info">
      <a href="#">Cheetah</a>
    </div>
    <div class="description">
      The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
    </div>
    <div>
      <a href="#">Learn more</a>
    </div>
  </div>

  <div class="item">
    <a href="#">
      <img width="400" height="400" src="https://placekitten.com/400/400" />
    </a>
    <div class="info">
      <a href="#">Cheetah</a>
    </div>
    <div class="description">
      The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
    </div>
    <div>
      <a href="#">Learn more</a>
    </div>
  </div>

  <div class="item">
    <a href="#">
      <img width="400" height="400" src="https://placekitten.com/400/400" />
    </a>
    <div class="type">
      <a href="#">Cheetah</a>
    </div>
    <div class="description">
      The cheetah is an atypical member of the cat family that is unique in its speed, while lacking climbing abilities.
    </div>
    <div>
      <a href="#">Learn more</a>
    </div>
  </div>
</div>

补充说明 #

• flex-wrap: wrap可让元素在容器宽度不足时自动换行，也可结合媒体查询强制垂直排列，按需选择即可
• 媒体查询的阈值（1280px）可根据设计需求调整，比如改为768px适配移动端

内容的提问来源于stack exchange，提问作者erics15