求助：实现随窗口大小自适应均匀分布的Div元素

数据老陈

2026-5-22

Hey Matt, 别发愁啦！这个自适应均匀分布的问题用CSS里的Flexbox或者Grid就能轻松搞定，给你两种实用方案参考：

方案1：Flexbox（兼容性拉满，推荐新手用）

先假设你的HTML结构是这样的（如果不是，调整类名就行）：

<div class="main">
  <div class="row">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
  </div>
  <div class="row">
    <div class="item">内容4</div>
    <div class="item">内容5</div>
    <div class="item">内容6</div>
  </div>
</div>

然后修改你的CSS，给每行加上Flex布局：

.main {
  width: 75%;
  margin: auto;
  background-color: #f2f2f2;
  padding: 1rem; /* 可选，给内部留点呼吸空间 */
}

.row {
  display: flex;
  gap: 1rem; /* 控制每个div之间的间距，可按需调整 */
  margin-bottom: 1rem; /* 两行之间的间距 */
}

.item {
  flex: 1; /* 核心！让每个item自动均分当前行的可用宽度 */
  background-color: #fff;
  padding: 0.5rem;
  box-sizing: border-box; /* 关键：确保padding不会撑大元素宽度 */
}

原理很简单：flex:1会让每个.item自动填充行内的剩余空间，不管窗口怎么缩放，每行的3个div都会自动调整宽度保持均匀分布，完全自适应。

方案2：CSS Grid（更直观的网格布局）

如果你习惯用Grid，这个写法也很省心：

.main {
  width: 75%;
  margin: auto;
  background-color: #f2f2f2;
  padding: 1rem;
}

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 直接定义3列，每列宽度均分 */
  gap: 1rem;
  margin-bottom: 1rem;
}

.item {
  background-color: #fff;
  padding: 0.5rem;
  box-sizing: border-box;
}

这里repeat(3,1fr)的意思是“重复3次，每次占1份可用空间”，效果和Flexbox完全一样，看你平时更习惯哪种布局思路。