Flexbox移动端布局适配问题：调整盒子排列与对齐方式

你当前的代码问题出在两个核心点：

• order设置冗余无效：先给A、B统一设order:2，又单独给B设order:3，这只会让B排在A后面，但不是布局失效的关键原因；
• justify-content属性不匹配需求：保留的space-between会让三个元素分散在容器左、中、右位置，无法实现A和B同时靠右侧的分组效果。

下面是两种可行的修正方案：

方案一：利用margin-auto实现分组（推荐） #

通过margin-left: auto把A和B整体推到右侧，同时调整order确保C在最左：

@media (max-width: 767px) {
  .container {
    /* 重置为左对齐，避免space-between分散元素 */
    justify-content: flex-start;
  }

  .C {
    order: 1; /* C排在最左侧 */
  }

  .A {
    order: 2;
    margin-left: auto; /* 填充左侧剩余空间，将A、B推到右侧 */
  }

  .B {
    order: 3; /* B紧跟在A右侧 */
  }
}

方案二：简化order设置（无需全局重置） #

因为原代码中元素的order是1、2、3，在媒体查询里直接覆盖即可，无需统一重置为0：

@media (max-width: 767px) {
  .container {
    justify-content: flex-start;
  }

  .C {
    order: 1;
  }

  .A {
    order: 2;
    margin-left: auto;
  }

  .B {
    order: 3;
  }
}

原理说明 #

• justify-content: flex-start让元素从容器左侧开始依次排列；
• margin-left: auto是Flex布局的实用技巧，它会自动填充元素左侧的所有剩余空间，从而把当前元素及后续元素整体推到容器的右侧；
• 通过order属性调整元素的排列顺序，确保C在最左，A、B在右侧保持原有顺序。

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