如何在display: flex中实现div元素的交错排列？

根据你的需求（两个设置了display: flex的容器实现交错排列，同时适配移动端），结合你提供的示意图，以下是几种实用的实现方式：

1. CSS Grid（最优解） #

Grid是处理这类布局最直观的方案，天生支持复杂的网格排列，适配移动端也很简单：

结构示例： #

<div class="grid-wrap">
  <div class="flex-container flex">
    <div class="card">内容1</div>
    <div class="card">内容2</div>
  </div>
  <div class="flex-container flex">
    <div class="card">内容A</div>
    <div class="card">内容B</div>
  </div>
</div>

CSS代码： #

.grid-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.flex {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 移动端适配：切换为单列，自动实现堆叠交错 */
@media (max-width: 768px) {
  .grid-wrap {
    grid-template-columns: 1fr;
  }
  /* 如需调整移动端子元素顺序，用order属性 */
  .flex-container:nth-child(2) .card:first-child {
    order: 2;
  }
}

这种方式可以轻松实现桌面端两列交错，移动端自动转为单列，通过order还能灵活控制元素显示顺序，维护成本低。

2. Flexbox + Order 属性（兼容旧项目） #

如果你的项目已经基于Flexbox构建，可以通过order属性配合媒体查询实现交错：

CSS代码： #

.flex-wrap {
  display: flex;
  gap: 1.5rem;
}

.flex-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 移动端调整顺序实现交错 */
@media (max-width: 768px) {
  .flex-wrap {
    flex-direction: column;
  }
  /* 调整子元素的order值，实现交错排列 */
  .flex-container:nth-child(1) .card:last-child {
    order: 3;
  }
  .flex-container:nth-child(2) .card:first-child {
    order: 2;
  }
}

这种方式无需重构现有Flex结构，但逻辑相对Grid稍复杂，适合小范围调整。

3. 负Margin（简单视觉错位） #

如果只是需要视觉上的轻微交错（比如一个容器整体偏移），可以用负margin快速实现：

.flex-container:nth-child(2) {
  margin-top: 2rem; /* 桌面端偏移产生交错视觉 */
}

@media (max-width: 768px) {
  .flex-container:nth-child(2) {
    margin-top: 0; /* 移动端取消偏移 */
  }
}

仅适用于简单的视觉错位场景，布局结构复杂时不推荐。

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