Flexbox能否实现三个div的两栏布局及移动端图片置顶需求？

结论 #

这个需求完全可以通过Flexbox实现，不需要强制使用CSS Grid，核心是结合Flex的order属性、换行规则和媒体查询，即可在三个同级div的结构下实现你要的布局效果。

实现逻辑 #

你需要的布局对应规则如下：

• 移动端：从上到下排列顺序为「图片 → 主内容 → 导航」
• 桌面端：左侧固定宽列从上到下为「图片 → 导航」，右侧自适应宽度列放置主内容

代码示例 #

HTML 结构

按你的要求使用三个同级div放在wrapper容器内：

<div class="wrapper">
  <div class="avatar">
    <!-- 图片内容 -->
  </div>
  <div class="main-content">
    <!-- 主内容 -->
  </div>
  <div class="nav">
    <!-- 导航内容 -->
  </div>
</div>

CSS 代码

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

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* 移动端默认样式：垂直排列 */
.avatar {
  width: 100%;
  height: 200px; /* 可根据实际图片高度调整 */
}
.main-content {
  width: 100%;
  padding: 20px;
}
.nav {
  width: 100%;
  padding: 20px;
}

/* 桌面端适配：768px为断点，可自定义调整 */
@media (min-width: 768px) {
  .avatar {
    width: 240px; /* 侧边栏固定宽度，可自定义 */
    order: 1; /* 调整顺序到左侧第一位置 */
  }
  .main-content {
    width: calc(100% - 240px);
    order: 2; /* 调整顺序到右侧 */
    min-height: 100vh; /* 主内容占满视口高度，撑开容器 */
  }
  .nav {
    width: 240px;
    order: 3; /* 调整顺序到左侧第二位置 */
    margin-top: calc(-100vh + 200px); /* 200px为avatar的高度，和上方图片保持对齐 */
  }
}

补充说明 #

如果你的图片高度是动态不固定的，也可以改用CSS变量绑定图片高度，或选择Grid方案实现会更简洁，但仅从可行性来看Flexbox完全可以满足你的需求。

内容的提问来源于stack exchange，提问作者Chris J Allen