如何使父div内任意数量子div自动铺满宽度且保持等宽？

作为一名资深前端开发者，我太懂这种“明明应该会但突然卡壳”的感觉了😅。你要的这种任意子div自动铺满父容器、宽度完全一致还支持响应式的需求，完全不用手动算百分比——CSS Grid和Flexbox就是最完美的解决方案，我给你详细拆解：

方案一：CSS Grid（最推荐，专为网格布局设计） #

CSS Grid天生就支持自动均分空间，代码极简且逻辑清晰，完全不需要手动计算百分比：

.parent-div {
  display: grid;
  /* 核心属性：自动适配列数，子元素最小宽度200px，剩余空间均等分配 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; /* 可选：子元素之间的间距，避免挤在一起 */
}

.child-div {
  /* 无需设置宽度，自动继承Grid分配的均等空间 */
  height: 120px; /* 示例高度，可根据需求自定义 */
  background-color: #f0f0f0;
  border-radius: 4px;
}

为什么好用？ #

• 自动适配子元素数量：不管父容器里有2个还是10个子div，都会自动均分宽度
• 响应式自动换行：当屏幕宽度不足以容纳所有子元素（按最小宽度200px计算），会自动换行，每行的子元素依然保持宽度一致
• 无需手动计算：1fr单位会自动把父容器的剩余空间均等分配给每个子元素，完全不用算百分比

方案二：Flexbox（一维布局场景适配） #

如果更习惯用Flexbox，也能轻松实现同样的效果，代码同样简洁：

.parent-div {
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  gap: 12px; /* 可选间距 */
}

.child-div {
  /* 核心属性：允许放大、不缩小到最小宽度以下、基准宽度200px */
  flex: 1 0 200px;
  height: 120px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

关键参数解释： #

• flex: 1 0 200px 等价于：
  • flex-grow: 1：当父容器有剩余空间时，子元素会均等放大填满空间
  • flex-shrink: 0：子元素不会被缩小到小于200px的宽度
  • flex-basis: 200px：子元素的基准宽度为200px

注意事项 #

• 两个方案里的200px可以根据你的设计需求调整，比如改成150px或者300px，完全不影响均分逻辑
• gap属性是可选的，如果不需要子元素间距可以直接去掉
• 这两个方案都支持所有现代浏览器，兼容性完全不用担心

内容的提问来源于stack exchange，提问作者S. Ling