如何用Flexbox实现目标网格布局？支持Flex Order移动端重排

嘿，我来帮你搞定这个Flexbox布局的问题！看起来你已经搞定了绿色列，但红色区域的排布和移动端的order调整卡住了，我给你梳理一个可行的方案👇

核心思路 #

首先，我们把布局拆成绿色列容器和红色区域容器两个独立部分，这样既方便桌面端的并排布局，也能在移动端轻松用order属性调整顺序，避免之前用单个容器加flex-wrap+固定高度带来的布局混乱。

完整代码实现 #

先看HTML结构，我们把绿色块和红色块分别放在各自的容器里：

<main>
  <div class="green-container">
    <div class="green">绿色块1</div>
    <div class="green">绿色块2</div>
  </div>
  <div class="red-container">
    <div class="red red-1">红色块1</div>
    <div class="red red-2">红色块2</div>
    <div class="red red-3">红色块3</div>
    <div class="red red-4">红色块4</div>
  </div>
</main>

然后是CSS部分，分桌面端和移动端：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 桌面端布局 */
main {
  display: flex;
  height: 400px; /* 你原来的固定高度，可根据需求调整 */
  width: 100%;
}

.green-container {
  flex: 0 0 25%; /* 绿色列占25%宽度，固定不缩放 */
  display: flex;
  flex-direction: column;
}

.green-container .green {
  flex: 1;
  padding: 1rem;
  background: green;
  color: white;
  border: 1px solid #fff;
}

.red-container {
  flex: 1; /* 红色区域占剩余宽度 */
  display: flex;
  flex-wrap: wrap;
}

.red-container .red {
  flex: 0 0 50%; /* 每个红色块占50%宽度，形成2列 */
  height: 50%; /* 每个红色块占容器高度的50%，形成2行 */
  padding: 1rem;
  background: red;
  color: white;
  border: 1px solid #fff;
}

/* 移动端布局：调整顺序 */
@media (max-width: 768px) {
  main {
    flex-direction: column;
    height: auto; /* 取消固定高度，让内容自适应 */
  }

  .green-container {
    flex: 1;
    order: 2; /* 绿色列移到后面 */
  }

  .red-container {
    flex-direction: column;
    order: 1; /* 红色区域移到前面 */
  }

  /* 还可以单独调整红色块的顺序，比如把red-3放到最前面 */
  .red-3 {
    order: -1;
  }
}

关键细节解释 #

1. 拆分容器：把绿色列和红色区域分开后，桌面端用main的display:flex实现并排，各自的容器内部再做子项排布，比单个容器加flex-wrap更可控。
2. 红色区域网格：通过flex-wrap: wrap+子项flex:0 0 50%+height:50%实现2x2的网格布局，如果你需要其他网格比例，调整这两个值就行。
3. 移动端order调整：媒体查询里把main改成竖排，然后给容器或单个块设置order值，数值越小越靠前，负数也可以用，灵活调整顺序。

这样你就能轻松实现目标布局，而且完全满足移动端用flex order重排的需求啦！

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