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

要实现每行显示五张图片然后自动换行，可以使用CSS的Flexbox布局。以下是几种实现方法：

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

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

.image-item {
  flex: 1 0 18%; /* flex-grow:1, flex-shrink:0, flex-basis:18% */
  margin: 1%; /* 添加一些间距 */
  max-width: 18%; /* 确保不超过18%宽度 */
}

方法二：使用固定宽度计算

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

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

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

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 图片之间的间距 */
}

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

注意事项

1. 确保容器宽度足够大，以便五个18-20%宽度的元素能排成一行
2. 考虑添加box-sizing: border-box以防止边框和内边距影响布局
3. 对于响应式设计，可能需要添加媒体查询来调整小屏幕下的显示数量

完整示例

<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;
  gap: 10px;
}

.image-item {
  flex: 0 0 calc(20% - 8px);
  box-sizing: border-box;
}

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

这些方法都能实现每行显示五张图片的效果，选择哪种取决于你的具体需求和浏览器兼容性要求。