如何在Flex容器中固定项目宽度并每行排列3个项目

要实现每行排列3个固定宽度项目、整体内容居中的需求，需要调整原代码中冲突的布局属性，以下是修正后的方案：

修正后的代码 #

CSS

* { 
  background:#C8c8c8; 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.row {
  display:flex; 
  width:100%; 
  gap:1rem; 
  justify-content:center; 
  align-items:center; 
  flex-wrap:wrap; 
  padding: 1rem 0; /* 可选：增加内容与容器上下边缘的间距 */
}

.item {
  width:45px; 
  height:45px; 
  background: gray;
  flex-shrink: 0; /* 强制保持固定宽度，避免容器空间不足时被压缩 */
}

.a2 {background: blue;}
.a3 {background: orange;}
.a4 {background: green;}
.a5 {background: red;}
.a6 {background: brown;}

HTML

<div class="container">
  <div class="row">
    <div class="item a1"></div>
    <div class="item a2"></div>
    <div class="item a3"></div>
    <div class="item a4"></div>
    <div class="item a5"></div>
    <div class="item a6"></div>
  </div>
</div>

关键调整说明 #

1. 移除冲突属性：删除了.item中的flex:0 0 25%——该属性会强制项目占据容器25%宽度，与你需要的固定45px宽度矛盾。
2. 固定宽度保障：添加flex-shrink:0，确保项目不会因容器空间变化而被压缩，始终保持设定的45px宽度。
3. 布局稳定性优化：全局样式中加入box-sizing:border-box、重置margin/padding，避免浏览器默认样式干扰布局效果。
4. 居中逻辑保留：.row中的justify-content:center会让每行的项目组在容器内水平居中，flex-wrap:wrap则在项目数量超过3个时自动换行。

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