如何基于媒体查询实现flex元素在不同屏幕下的排序与布局调整

实现方案 #

方案1：轻微调整HTML结构（维护性更高） #

HTML 代码

<div class="container">
  <div class="block block-left">左侧区块（移动端排在最上方）</div>
  <div class="block-wrap">
    <div class="block block-top-right">右上区块（移动端排在中部）</div>
    <div class="block block-bottom-right">右下区块（移动端排在最下方）</div>
  </div>
</div>

CSS 代码

/* 全局默认样式，适配移动端 */
.container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 按需调整区块间距 */
}
.block {
  padding: 20px;
  border: 1px solid #ccc;
}
/* 大屏幕适配，断点可按需调整，这里用768px作为平板/桌面端分界 */
@media screen and (min-width: 768px) {
  .container {
    flex-direction: row;
  }
  .block-left {
    flex: 0 0 50%; /* 左侧区块占比可按需调整 */
  }
  .block-wrap {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

方案2：不修改HTML结构，纯Flex实现 #

如果你的HTML是三个平级区块，不需要额外嵌套容器，可以用以下方案：

HTML 代码

<div class="container">
  <div class="block block-a">区块A</div>
  <div class="block block-b">区块B</div>
  <div class="block block-c">区块C</div>
</div>

CSS 代码

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.block {
  padding: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* 移动端样式 */
.block-a, .block-b, .block-c {
  width: 100%;
}
/* 大屏幕样式 */
@media screen and (min-width: 768px) {
  .container {
    height: 400px; /* 按需设置容器高度，需匹配右侧两个区块加间距的总高度 */
  }
  .block-a {
    width: calc(50% - 5px);
    height: 100%;
  }
  .block-b, .block-c {
    width: calc(50% - 5px);
    height: calc(50% - 5px);
  }
}

内容的提问来源于stack exchange，提问作者Ante Ereš