CSS Flex布局适配问题：按钮区域跨终端位置调整

核心思路 #

通过**弹性布局（Flexbox）**结合媒体查询，调整元素的排列方向与顺序，同时在桌面端将info和buttons合并为右侧列的一部分，无需修改现有HTML结构。

完整CSS代码实现 #

/* 基础样式：移动端默认布局 */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.photo, .info, .buttons {
  width: 100%;
}

/* 平板端（768px ≤ 屏幕宽度 < 992px） */
@media (min-width: 768px) and (max-width: 991px) {
  .wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
  }
  .photo {
    width: calc((100% / 1200)* 515);
  }
  .info {
    flex: 1; /* 占据剩余宽度 */
  }
  .buttons {
    order: 3; /* 强制排在两列下方 */
    width: 100%; /* 全屏宽度 */
  }
}

/* 桌面端（屏幕宽度 ≥ 992px） */
@media (min-width: 992px) {
  .wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
  .photo {
    width: calc((100% / 1200)* 515);
  }
  /* 将info设为垂直弹性容器，让buttons成为右侧列的一部分 */
  .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px; /* info与buttons的间距 */
  }
  .buttons {
    width: 100%; /* 跟随info宽度 */
  }
}

代码说明 #

• 基础样式：默认移动端采用垂直排列，所有元素占满宽度，适配小屏场景。
• 平板端适配：
  • wrapper开启换行，photo保持指定宽度，info占据剩余空间
  • 通过order:3让buttons强制排在两列之后，width:100%实现全屏宽度
• 桌面端适配：
  • 将info设置为垂直弹性容器，无需修改HTML，就能让buttons自然位于info内容下方，形成右侧列的一部分

注意事项 #

• 无需调整现有HTML结构，仅通过CSS完成布局切换
• 可根据需求修改gap值调整元素间距，或修改calc计算式调整宽度比例
• 确保图片轮播组件能正常继承.photo的宽度设置，避免溢出问题

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