使用flex布局，多行，每行平均5个item，每个item之间有间隙

要使用 Flex 布局实现多行，每行平均 5 个项目（item），并且每个项目之间有间隙，你可以按照以下步骤进行：

1. HTML 结构：

首先，创建一个包含多个项目的容器。

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <!-- ... 更多项目 ... -->
</div>

2. CSS 样式：

接下来，为容器和项目定义 Flex 布局的样式。

.flex-container {
    display: flex;
    flex-wrap: wrap; /* 允许项目换行 */
    justify-content: space-between; /* 项目之间的间隙 */
}

.flex-item {
    flex: 0 0 calc(20% - 10px); /* 每行5个项目，所以每个项目占20%，再减去间隙 */
    margin-bottom: 10px; /* 项目之间的垂直间隙 */
    box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的总宽度 */
}

/* 可选：为了美观，可以添加一些样式 */
.flex-item {
    background-color: #f5f5f5;
    padding: 10px;
    text-align: center;
}

注意：

• flex: 0 0 calc(20% - 10px); 这行代码设置了每个项目的宽度。calc(20% - 10px) 表示每个项目占据容器宽度的 20%，但再减去 10px 的间隙，以确保每行可以放下 5 个项目。你可能需要根据实际的项目间隙和设计要求调整这个值。
• justify-content: space-between; 在主轴上（水平方向）为项目之间添加间隙。如果你想要在项目之间有固定的间隙，可以使用 margin-right 属性为每个项目添加右边距，并相应地调整项目的宽度。
• margin-bottom: 10px; 在交叉轴上（垂直方向）为项目之间添加间隙。这个值也可以根据你的设计要求进行调整。

这样，你就可以得到一个每行包含 5 个项目，且项目之间有间隙的 Flex 布局了。