移动端flex布局将中心div移至底部的响应式实现方案

核心需求 #

• 桌面端：容器采用flex布局，左右侧栏（.column.left、.column.right）最大宽度限制为175px，中间栏（.column.center）宽度自适应填充剩余空间
• 移动端：整体为两行网格结构，第一行放置左右侧栏，各占50%宽度，高度随内容自适应；第二行放置中间栏，占满100%宽度，位于容器最底部
• 实现约束：禁止使用元素隐藏、重复渲染DOM的方案

实现思路 #

原有代码已经完成桌面端基础flex布局，仅需补充移动端响应式逻辑即可满足要求：

• 给容器添加flex-wrap: wrap允许子元素换行，支撑移动端多行排布
• 移动端断点下清除左右侧栏的最大宽度限制，设置宽度为50%实现第一行并排效果
• 利用flex布局的order属性调整中间栏排列顺序，设置为1即可让它排在默认order为0的左右侧栏之后，无需改动HTML结构即可实现置底效果
• 移动端下给中间栏设置宽度100%，清除原有flex自适应属性，实现第二行通栏展示

完整代码 #

CSS代码 #

#container {
  display: flex;
  flex-wrap: wrap;
}

.column.left,
.column.right {
  max-width: 175px;
  text-align: center;
}

.column.center {
  flex: 1;
  text-align: center;
  background-color: red;
}

/* 移动端断点可根据业务需求调整阈值，此处以常见的768px分界为例 */
@media (max-width: 767px) {
  .column.left,
  .column.right {
    max-width: unset;
    width: 50%;
  }
  .column.center {
    flex: none;
    width: 100%;
    order: 1;
  }
}

HTML代码 #

原有HTML结构无需调整，可直接复用：

<body>
  <div id="container">
    <div class="column left">this is a long long long long label</div>
    <div class="column center">center</div>
    <div class="column right">short label</div>
  </div>
</body>

实现说明 #

• 全程未新增、删除DOM节点，也未使用display: none类的隐藏逻辑，完全符合实现约束
• 所有元素高度默认由内容撑开，无需额外设置固定高度
• 移动端断点阈值可根据项目实际设计规范调整，不影响核心布局逻辑

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