如何用单个父元素与三个子元素的Flexbox实现大小屏不同布局？

核心思路 #

借助Flexbox的flex-wrap属性结合媒体查询，无需额外嵌套元素，仅通过单个父容器和三个子元素就能完成小屏与大屏的布局切换。

布局效果说明 #

• 小屏（移动端）：三个子元素垂直堆叠排列
• 大屏（桌面端）：前两个子元素横向排布，第三个子元素独占整行（可根据实际需求调整子元素宽度分配）

完整代码实现 #

HTML结构

<div class="flex-container">
  <div class="item item-a">元素A</div>
  <div class="item item-b">元素B</div>
  <div class="item item-c">元素C</div>
</div>

CSS样式

/* 基础样式：小屏布局 */
.flex-container {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 子元素间距，可自定义 */
}

.item {
  padding: 1.5rem;
  background-color: #f0f0f0;
  border-radius: 4px;
}

/* 大屏布局：媒体查询触发 */
@media (min-width: 768px) {
  .flex-container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .item-a, .item-b {
    flex: 1 1 40%; /* 两个元素平分可用空间，最小宽度40%避免过度挤压 */
  }

  .item-c {
    flex: 1 1 100%; /* 独占整行 */
  }
}

自定义调整说明 #

如果你的大屏布局需求是元素A左对齐、元素B右对齐，元素C独占整行，只需修改大屏下的样式：

@media (min-width: 768px) {
  .flex-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .item-a, .item-b {
    flex: 0 1 auto; /* 仅占据自身内容宽度 */
  }

  .item-c {
    flex: 1 1 100%;
  }
}

你还可以通过调整flex属性的三个值（flex-grow/flex-shrink/flex-basis），精准控制子元素的缩放规则和基础宽度，适配更个性化的布局需求。

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