flex align-content

align-content 是 Flexbox 布局中的一个属性，用于控制多行（或多列）Flex 容器中各行（或列）之间的对齐方式。这个属性决定了当 Flex 容器有额外空间时，如何分配各行之间的空间。

align-content 的属性值

1. stretch（默认值）：各行会伸展以占满交叉轴的剩余空间。

2. flex-start：各行向交叉轴的起点对齐。

3. flex-end：各行向交叉轴的终点对齐。

4. center：各行在交叉轴上居中对齐。

5. space-between：各行在容器中平均分布，第一行在交叉轴起点，最后一行在交叉轴终点。

6. space-around：各行在容器中平均分布，每行周围分配相等的空间。

7. space-evenly：各行在容器中平均分布，每行之间的间隔相等。

如 align-content: flex-start;：

.wrapper-systems {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 50px 125px;
    height: calc(100% - 64px);
    overflow: auto;
    padding: 0 100px;
    /* 其他样式 */
}

这个设置使得所有的行（系统项目的行）都向容器的顶部对齐。当容器高度大于内容高度时，所有的项目都集中在顶部，而不是均匀分布在整个容器中。这也解释了为什么当子元素数量不足以填满容器高度时，垂直方向的 gap 看起来不起作用——因为所有的行都被推到了顶部。

如果你想要不同的布局效果，可以尝试其他 align-content 值：

• 如果你想要各行均匀分布在容器中，可以使用 space-between、space-around 或 space-evenly。
• 如果你想要各行居中显示，可以使用 center。
• 如果你想要各行填满整个容器高度，可以使用默认的 stretch。

举例来说，如果你想要各行在容器中均匀分布，可以这样修改：

.wrapper-systems {
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly; /* 更改为均匀分布 */
    gap: 50px 125px;
    height: calc(100% - 64px);
    overflow: auto;
    padding: 0 100px;
}

这样，即使子元素数量不足以填满容器高度，它们也会在容器中均匀分布，垂直方向的 gap 也会更加明显。