如何使用Flex实现特定响应式Div布局？适配不同屏幕宽度

你可以用CSS Grid来实现这种精准的响应式布局，它天生适合处理这种二维的元素排列需求，配合@media就能轻松切换不同屏幕尺寸下的布局。

第一步：HTML结构 #

先把需要的元素放进一个容器里，结构清晰即可：

<div class="layout-container">
  <div class="box div1">div1</div>
  <div class="box div2">div2</div>
  <div class="box div3">div3</div>
  <div class="box image">an-image</div>
  <div class="box div4">div4</div>
  <div class="box div5">div5</div>
  <div class="box div6">div6</div>
</div>

第二步：基础样式与响应式布局 #

先给容器和元素加些基础样式，再通过@media分别定义小屏和大屏的网格规则：

/* 基础样式，可根据需求调整 */
.layout-container {
  width: 90%;
  margin: 0 auto;
  gap: 10px; /* 元素间距 */
}

.box {
  padding: 10px;
  border: 1px solid #ccc;
  /* 让内容居中，可选 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 屏幕宽度 < 600px 时的布局 */
@media (max-width: 599px) {
  .layout-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
  }

  /* 让div1、图片、div6跨两列居中 */
  .div1, .image, .div6 {
    grid-column: 1 / -1;
    justify-self: center; /* 水平居中 */
  }
}

/* 屏幕宽度 > 600px 时的布局 */
@media (min-width: 600px) {
  .layout-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
    grid-template-rows: auto auto auto; /* 三行，高度自适应 */
  }

  /* div1和div6跨三列居中 */
  .div1, .div6 {
    grid-column: 1 / -1;
    justify-self: center;
  }

  /* 图片占中间列，跨两行 */
  .image {
    grid-column: 2;
    grid-row: 2 / 4;
  }

  /* 左侧列的元素 */
  .div2 { grid-column: 1; grid-row: 2; }
  .div4 { grid-column: 1; grid-row: 3; }

  /* 右侧列的元素 */
  .div3 { grid-column: 3; grid-row: 2; }
  .div5 { grid-column: 3; grid-row: 3; }
}

关键说明 #

• CSS Grid的grid-column和grid-row可以精准控制元素在网格中的位置，1 / -1表示从第一列到最后一列（跨所有列）。
• justify-self: center用来让元素在单元格内水平居中，如果你需要元素占满整列宽度，去掉这个属性即可。
• 可以根据实际需求调整grid-template-columns的比例（比如改成200px 1fr 200px）、gap间距以及元素的内边距、边框样式。

如果你习惯用Flex，小屏布局用Flex也能实现，但大屏的二维排列用Grid会更简洁，不需要额外嵌套容器。

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