如何用CSS和flexboxes实现基于视口宽度自动调整行列的布局？

以下是符合你需求的实现方案，用Flexbox实现固定尺寸盒子的响应式行列切换，配合媒体查询控制不同视口下的列数：

实现思路 #

• 用flex-wrap: wrap让盒子在容器宽度不足时自动换行
• 盒子设置固定宽高，不随视口缩放
• 通过媒体查询（Media Queries）控制容器的最大宽度，从而限制每行能容纳的盒子数量，实现3列→2列→1列的切换

完整代码示例 #

HTML结构 #

<div class="box-container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
  <div class="box">盒子4</div>
  <div class="box">盒子5</div>
  <div class="box">盒子6</div>
</div>

CSS样式 #

/* 容器基础样式 */
.box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 盒子之间的间距，替代margin更易维护 */
  justify-content: center; /* 可选：让盒子在容器中居中排列 */
  margin: 20px auto; /* 容器水平居中，上下留间距 */
}

/* 固定尺寸的盒子样式 */
.box {
  width: 200px; /* 固定宽度 */
  height: 150px; /* 固定高度 */
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* 视口宽度≥700px时，显示3列 */
@media (min-width: 700px) {
  .box-container {
    max-width: calc(200px * 3 + 20px * 2); /* 3个盒子宽度 + 2个间距的总宽度 */
  }
}

/* 视口宽度在500px~699px之间时，显示2列 */
@media (min-width: 500px) and (max-width: 699px) {
  .box-container {
    max-width: calc(200px * 2 + 20px * 1); /* 2个盒子宽度 + 1个间距的总宽度 */
  }
}

/* 视口宽度<500px时，显示1列 */
@media (max-width: 499px) {
  .box-container {
    max-width: 200px; /* 仅容纳1个盒子的宽度 */
  }
}

代码说明 #

1. Flexbox核心设置：display: flex和flex-wrap: wrap是实现自动换行的关键，当容器宽度不足以容纳所有盒子时，多余的盒子会自动换到下一行。
2. 固定尺寸盒子：.box设置了固定的width和height，完全不会随视口缩放，符合你的需求。
3. 媒体查询控制列数：通过max-width限制容器的宽度，确保在不同视口下，每行只能放下指定数量的盒子，从而实现行列切换。你可以根据自己的盒子尺寸，调整媒体查询的阈值和容器宽度计算值。
4. 间距处理：用gap属性统一设置盒子之间的间距，比单独给盒子加margin更简洁，也不会出现容器边缘多余的间距问题。

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