使用Flex布局实现每五张图片换行显示

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

方法一：使用flex-basis和flex-grow

<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>

<style>
.image-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}

.image-item {
  flex: 0 0 20%; /* 每个项目占20%宽度 */
  box-sizing: border-box; /* 包含padding和border在宽度内 */
  padding: 5px; /* 可选间距 */
}

.image-item img {
  width: 100%;
  height: auto;
  display: block;
}
</style>

方法二：使用calc()计算宽度

.image-container {
  display: flex;
  flex-wrap: wrap;
}

.image-item {
  width: calc(20% - 10px); /* 20%宽度减去间距 */
  margin: 5px; /* 间距 */
  box-sizing: border-box;
}

方法三：使用gap属性（现代浏览器支持）

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 项目间距 */
}

.image-item {
  flex: 0 0 calc(20% - 8px); /* 20%宽度减去部分gap */
}

注意事项

1. 响应式设计：可以考虑添加媒体查询，在小屏幕上减少每行显示数量

   @media (max-width: 768px) {
    .image-item {
      flex: 0 0 33.33%; /* 小屏幕每行3张 */
    }
   }
   

2. 图片比例：如果需要保持图片比例一致，可以使用padding-top技巧

   .image-item {
    position: relative;
    padding-top: 20%; /* 5:1比例 */
   }
   
   .image-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
   }
   

3. 浏览器兼容性：Flexbox在现代浏览器中有很好的支持，但如需支持旧版IE，可能需要添加前缀或使用替代方案。

以上方法都能实现每行五张图片的布局，选择哪种取决于你的具体需求和项目环境。