为什么我的图标得到额外的高度?我在底部附加了沙盒链接

Question

我有一个div，它有500px的height和width，在这个div中我有8个icons,font-size: 60px和margin: 0 30px，我已经对div和justify-content: space-between,flex-wrap: wrap应用了显示flex，但是我的图标在div中得到了所有剩余的高度。

<div id="container">
<nav id="navbar">
<a href="j" className="link">
Site Name
</a>
<a href="f">
<FaRegUserCircle className="user-icon" />
</a>
</nav>
{/* navbar above */}
<div id="playlist-container">
<div id="playlist">
<div className="icons">
<BsCloudRain />
</div>
<div className="icons">
<GiForest />
</div>
<div className="icons">
<MdOutlineWaterDrop />
</div>
<div className="icons">
<BiWind />
</div>
<div className="icons">
<GiCampfire />
</div>
<div className="icons">
<GiThreeLeaves />
</div>
<div className="icons">
<BsMoonStars />
</div>
<div className="icons">
<BiWater />
</div>
</div>
</div>
</div>

Css

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
height: 100vh;
width: 100%;
background-color: rgb(10, 116, 80);
}
#navbar {
height: 76px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 0.5px 10px 1px rgb(32, 32, 32);
}
.link {
font-size: 30px;
margin-left: 30px;
}
.user-icon {
margin-right: 70px;
font-size: 30px;
}
a {
color: #fff;
text-decoration: none;
}
/* Navbar */
#playlist-container {
display: flex;
justify-content: center;
}
#playlist {
height: 500px;
width: 500px;
background-color: aquamarine;
margin: 80px auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.icons {
font-size: 60px;
margin: 0 30px;
}

沙箱

Answer 1

CSS align-content属性设置内容项之间和周围的空间沿flex的横轴分布。

添加align-content: flex-start;播放列表:

#playlist {
height: 500px;
width: 500px;
background-color: aquamarine;
margin: 80px auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: flex-start;
}