CSS如何控制每行单元格数量？实现响应式固定单元格布局

要实现固定单元格尺寸，同时让页面在宽屏显示更多每行单元格、窄屏自动减少的需求，核心可以借助Flexbox的特性来完成：

• 给单元格设置固定宽度的flex-basis，搭配flex-shrink: 0确保单元格不会被压缩变形
• 父容器启用display: flex和flex-wrap: wrap，让单元格空间不足时自动换行
• 用gap属性控制单元格间的间距，比margin更省心

示例代码 #

/* 单元格父容器 */
.cell-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 自定义单元格间距 */
}

/* 单个单元格 */
.cell {
  flex-basis: 164px; /* 固定单元格宽度 */
  flex-shrink: 0;
  /* 可根据需求设置固定高度 */
  height: 200px;
}

你的解决方案说明 #

你把flex-basis: 12.5%修改为164px后解决问题，本质是将原本基于父容器百分比的弹性宽度替换成了固定宽度。配合Flexbox的自动换行逻辑，父容器会根据当前屏幕宽度自动计算能容纳的固定宽度单元格数量，宽屏时自然能放下更多，窄屏则自动减少每行数量，完全匹配需求。

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