基于HTML/CSS实现图片展示方块布局求助（flex尝试失败）

直接给你能实现图中效果的CSS代码，配合你的HTML结构就能生效：

.portfolio__body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px; /* 方块之间的间距，按需调整 */
  width: 100%;
  max-width: 600px; /* 限制容器最大宽度，避免太宽 */
  margin: 0 auto; /* 让整个容器在页面居中 */
}

.square {
  width: 180px;
  height: 180px;
  background-color: #e0e0e0; /* 替换成你的图片背景 */
  flex-shrink: 0; /* 禁止方块被压缩 */
}

关键说明 #

• flex-wrap: wrap 让方块一行放不下时自动换行
• justify-content: center 保证每行的方块都居中对齐，正好匹配图里的排列样式
• gap 直接控制方块之间的间距，比用margin更简洁
• 给.square设置固定宽高确保是正方形，flex-shrink: 0防止方块被挤变形

如果需要调整方块大小或间距，直接修改对应数值就行。

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