如何使用Flexbox实现由50px×50px正方形组成的5x5网格？

你的代码问题出在.grid-item的flex属性配置：flex: 1 0 17%的第一个参数flex-grow为1，会让元素自动拉伸填充父容器的剩余空间，所以宽度无法固定为50px。

你可以按如下方式调整代码：

修改后的CSS代码 #

#grid {
  display: flex;
  /* 新增：超出一行自动换行 */
  flex-wrap: wrap;
  /* 可选：让容器宽度自适应内容，不占满全屏 */
  width: fit-content;
  /* 可选：网格元素之间的间距，可自行调整数值 */
  gap: 4px;
}

.grid-item {
  /* 三个参数分别对应：禁止拉伸、禁止压缩、基础宽度固定为50px */
  flex: 0 0 50px;
  height: 50px;
}

可选优化说明 #

• 如果不需要元素间距，删掉gap属性即可，5个50px的元素刚好凑成250px宽的一行，自动排成5行形成5x5网格
• 如果需要让整个网格在页面居中，可以给#grid新增margin: 0 auto属性
• 如果你想保留父容器占满全屏的特性，同时让所有网格项左对齐，删掉width: fit-content即可，多余的空间会留在容器右侧，不会拉伸网格元素

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