FlexBox实现移动端div在两个垂直堆叠div间对齐的问题

结论 #

在你当前的HTML结构下，仅用FlexBox无法实现目标移动端布局——因为div2/div3/div4和div1/div5分属不同父容器，Flex的order属性只能控制同一父容器内子元素的排列顺序，无法跨容器调整层级。但只要微调HTML结构，就能用Flex轻松达成需求。

可行方案（修改HTML结构） #

将div1和div5从.sub-container中移出，使其成为.container的直接子元素（如果.sub-container无其他用途，可直接删除），之后用order属性在移动端调整元素顺序即可。

修改后的完整代码

HTML

<div class="container">
  <div class="div1">1</div>
  <div class="div5">5</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

CSS

.container{
  display: flex;
}

.container div{
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div1{
  background: red;
}

.div2{
  background: yellow;
}

.div3{
  background: green;
}

.div4{
  background: blue;
}

.div5{
  background: grey;
}

@media screen and (max-width: 480px) {
  .container{
     flex-direction: column;
  }
  /* 移动端调整元素顺序 */
  .div1 { order: 1; }
  .div2 { order: 2; }
  .div3 { order: 3; }
  .div4 { order: 4; }
  .div5 { order: 5; }
}

若需保留.sub-container #

如果必须保留.sub-container（比如它承载了其他样式），可以将其拆分为两个独立容器，分别包裹div1和div5，再通过order控制顺序：

调整后的HTML

<div class="container">
  <div class="sub-container div1-wrap">
    <div class="div1">1</div>
  </div>
  <div class="sub-container div5-wrap">
    <div class="div5">5</div>
  </div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

移动端CSS补充

@media screen and (max-width: 480px) {
  .container{
     flex-direction: column;
  }
  .div1-wrap { order: 1; }
  .div2 { order: 2; }
  .div3 { order: 3; }
  .div4 { order: 4; }
  .div5-wrap { order: 5; }
}

关键说明 #

Flex布局的核心限制是只能操作同一父容器下的子元素，跨容器的顺序调整无法仅通过Flex属性实现。微调HTML结构是最直接且符合Flex设计逻辑的解决方案。

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