如何用Flex实现桌面/移动端3元素的行列自适应布局？

布局需求 #

宽屏布局 #

• 元素#1与#2同行，#1宽度占#1+#2总宽度的50%且可拉伸（高度可大于或小于#2）
• 元素#2宽度占50%，最大宽度限制为385px
• 元素#3宽度与#1保持一致

移动端布局 #

元素按1-2-3的顺序垂直排列，所有元素宽度均为100%

宽屏布局示例

移动端布局示例

问题探讨 #

目前可行思路是将#1和#3归为一列、#2单独成一列，用Flex实现宽屏布局，但移动端需要三个元素独立排列，让#3位于#2下方。

已知可通过调整#2的渲染位置（放在#1内部或外部）实现，但希望找到无需修改HTML结构的方法，比如仅用CSS/Flex或通过CSS调整显示顺序。

以下是初始尝试的Flex代码：

<div class="wrapper">
  <div class="c1">
    <div class="e1">
      1
    </div>
  </div>
  <div class="c2">
    <div class="e2">
      2
    </div>
  </div>
  <div class="c3">
    <div class="e3">
      3
    </div>
  </div>
</div>

.wrapper {
  background-color: #eee;
  display: flex;
  flex-flow: row wrap;
  div {
    height: 40px;
    color: white;
  }
  @media screen and (max-width: 500px) {
    flex-direction: column;
  }
}
.c1 {
  background-color: #900;
  flex: 4 1 50%;
  @media screen and (max-width: 500px) {
    flex: 1 1 100%;
  }
}
.c2 {
  background-color: #090;
  flex: 4 1 50%;
  
  @media screen and (max-width: 500px) {
    flex: 1 1 100%;
  }
}
.c3 {
  background-color: #009;
  max-width: 180px;
  flex: 0 1 50%;
  @media screen and (max-width: 500px) {
    flex: 1 1 100%;
    max-width: none;
  }
}

.e1 {
  min-width: 200px;
}
.e2 {
  min-width: 150px;
}
.e3 {
  width: 300px;
}

优化实现方案 #

方案一：CSS Grid布局（推荐） #

Grid布局无需修改HTML结构，通过定义网格规则即可精准控制元素位置：

<div class="wrapper">
  <div class="c1">
    <div class="e1">1</div>
  </div>
  <div class="c2">
    <div class="e2">2</div>
  </div>
  <div class="c3">
    <div class="e3">3</div>
  </div>
</div>

.wrapper {
  background-color: #eee;
  display: grid;
  /* 宽屏两列：第一列自适应，第二列最大385px */
  grid-template-columns: 1fr minmax(auto, 385px);
  gap: 8px; /* 可选，添加元素间距 */
}

/* 指定元素所在网格列 */
.c1, .c3 { grid-column: 1; }
.c2 {
  grid-column: 2;
  grid-row: 1 / span 2; /* 让#2占据第一、二行高度，支持高度大于/小于#1 */
}

/* 移动端切换为单列布局 */
@media screen and (max-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr;
  }
  .c1, .c2, .c3 {
    grid-column: 1;
    grid-row: auto; /* 恢复默认顺序 */
  }
}

/* 基础样式 */
.c1, .c2, .c3 {
  height: 40px;
  color: white;
}
.c1 { background-color: #900; }
.c2 { background-color: #090; }
.c3 { background-color: #009; }

.e1 { min-width: 200px; }
.e2 { min-width: 150px; }
.e3 { width: 100%; /* 继承#1的宽度 */ }

方案二：Flex布局（无HTML结构修改） #

利用Flex的弹性属性和换行特性，结合媒体查询实现需求：

<div class="wrapper">
  <div class="c1">
    <div class="e1">1</div>
  </div>
  <div class="c2">
    <div class="e2">2</div>
  </div>
  <div class="c3">
    <div class="e3">3</div>
  </div>
</div>

.wrapper {
  background-color: #eee;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 宽屏布局 */
.c1 {
  background-color: #900;
  flex: 1 1 calc(50% - 4px); /* 减去一半间距，保证总占比50% */
  min-width: 200px;
}

.c2 {
  background-color: #090;
  flex: 0 1 calc(50% - 4px);
  max-width: 385px;
  min-width: 150px;
  height: auto; /* 支持高度自适应 */
}

.c3 {
  background-color: #009;
  flex: 0 0 auto;
  width: calc(100% - 385px - 8px); /* 与#1宽度保持一致 */
  min-width: 200px;
}

/* 移动端布局 */
@media screen and (max-width: 500px) {
  .wrapper {
    flex-direction: column;
  }
  .c1, .c2, .c3 {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* 基础样式 */
.c1, .c2, .c3 {
  height: 40px;
  color: white;
}
.e3 { width: 100%; }

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