如何在页面缩至最小视口时让头部图片置于注册按钮下方？

要实现仅在小视口下让头部图片置于注册按钮下方，核心是用媒体查询控制flex布局的换行时机，而非全局启用flex-wrap: wrap。以下是具体实现步骤：

基础布局设置 #

假设你的头部结构是注册按钮和图片包裹在一个容器内，先给容器设置默认的flex横向布局，确保大屏幕下不换行：

.header-container {
  display: flex;
  flex-wrap: nowrap; /* 默认不换行，可省略，flex默认值即为nowrap */
  align-items: center; /* 让按钮和图片垂直居中 */
  gap: 1.5rem; /* 按钮与图片的间距 */
}

.header-img {
  max-width: 100%; /* 图片自适应容器宽度，防止溢出 */
}

媒体查询控制小视口布局 #

当视口缩小到指定阈值（比如768px，可根据你的设计需求调整），修改容器的flex属性，让图片换行到按钮下方：

方案1：切换为纵向布局（更直观） #

直接把flex方向改成纵向，图片自然会排在按钮下方：

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: stretch; /* 让按钮和图片占满容器宽度，可选 */
  }

  .header-img {
    margin-top: 1rem; /* 小屏下增加按钮与图片的间距，替代gap */
  }
}

方案2：保留横向布局但强制换行 #

如果需要保留横向布局逻辑，可通过设置图片的flex-basis让它占据整行，触发换行：

@media (max-width: 768px) {
  .header-container {
    flex-wrap: wrap;
  }

  .header-img {
    flex-basis: 100%; /* 图片占满整行宽度，自动换行到下一行 */
    width: 100%;
  }
}

为什么之前的方法会失效？ #

你之前直接给容器加了flex-wrap: wrap，没有限制视口范围，当容器本身宽度不足以容纳按钮和图片时（比如大屏幕下容器被设置了固定宽度），就会触发换行。通过媒体查询，我们只在小视口时启用换行逻辑，就能精准控制布局变化时机。

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