设置Flexbox高度100%后换行行间距过大，gap:0无效的问题

问题描述 #

我创建了一个设置flex-flow: row wrap的Flex容器，内部包含卡片元素，期望元素自动换行。但换行后上下行卡片间距过大，设置gap: 0也无法解决该问题；移除容器的height属性后，间距恢复正常。

问题原因 #

这是因为Flex容器默认的align-content属性值为stretch。当容器设置了固定高度时，该属性会将容器内的flex行（换行后的每一行）拉伸，以填满容器的剩余垂直空间，从而导致行之间出现巨大间距。gap仅用于控制行/列之间的额外间距，无法覆盖align-content的拉伸行为。

解决方案 #

给Flex容器添加align-content: flex-start（也可根据需求选择flex-end、center、space-between等对齐方式），这样flex行不会被拉伸，行间距将由gap控制，同时保留容器的固定高度。

修改后的代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,html{
            margin: 0;
            width:100%;
            height: 100%;
        }
        .div1{
            width:30%;
            height: 100%;
            background-color: blue;
            display: flex;
            flex-flow: row wrap;
            padding: 10px;
            gap: 10px;
            align-content: flex-start; /* 添加这一行 */
        }
        .card{
            width: 100px;
            height: 140px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sunlight