使用Flex布局实现每五张图片换行排列

要实现每行显示五张图片并在超出时自动换行，可以使用CSS的Flexbox布局。以下是完整的解决方案：

HTML结构

<div class="image-container">
  <div class="image-item"><img src="image1.jpg" alt=""></div>
  <div class="image-item"><img src="image2.jpg" alt=""></div>
  <div class="image-item"><img src="image3.jpg" alt=""></div>
  <div class="image-item"><img src="image4.jpg" alt=""></div>
  <div class="image-item"><img src="image5.jpg" alt=""></div>
  <div class="image-item"><img src="image6.jpg" alt=""></div>
  <!-- 更多图片... -->
</div>

CSS解决方案

.image-container {
  display: flex;          /* 启用flex布局 */
  flex-wrap: wrap;        /* 允许换行 */
  gap: 10px;             /* 设置图片间距，可选 */
}

.image-item {
  flex: 0 0 calc(20% - 10px);  /* 每行5个，每个占20%宽度减去间隙 */
  max-width: calc(20% - 10px); /* 兼容性考虑 */
  box-sizing: border-box;      /* 确保padding和border不影响宽度计算 */
}

.image-item img {
  width: 100%;           /* 图片填充容器宽度 */
  height: auto;          /* 保持图片比例 */
  display: block;        /* 去除图片底部间隙 */
}

关键点说明

1. flex-wrap: wrap - 允许flex项目换行
2. flex: 0 0 calc(20% - 10px) - 确保每个项目占20%宽度(100%/5=20%)，减去间隙
   • 第一个0表示不增长
   • 第二个0表示不收缩
3. gap: 10px - 设置项目之间的间距(现代浏览器支持)
4. box-sizing: border-box - 确保padding和border包含在宽度计算内

响应式考虑

如果需要响应式设计，可以添加媒体查询：

@media (max-width: 768px) {
  .image-item {
    flex: 0 0 calc(50% - 10px);  /* 小屏幕每行2个 */
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  .image-item {
    flex: 0 0 100%;      /* 超小屏幕每行1个 */
    max-width: 100%;
  }
}

替代方案（不使用calc）

如果不喜欢使用calc，也可以这样写：

.image-container {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;          /* 抵消子元素的margin */
}

.image-item {
  flex: 0 0 20%;
  padding: 5px;          /* 使用padding作为间距 */
  box-sizing: border-box;
}

这种方法使用负margin和padding来实现间距，避免了calc计算。