CSS导航链接横向排列问题求助：如何改为纵向排列？

Flex布局默认以**横向（row）**作为子元素的排列方向，这是你导航链接横向显示的核心原因。只需为.menu容器添加flex-direction: column属性，就能将排列方向改为纵向：

修改后的CSS代码 #

.menu{
    display: flex;
    flex-direction: column; /* 核心修改：设置纵向排列 */
    justify-content: center;
    align-items: center;
}

可选优化：添加链接间距 #

如果需要让导航链接之间保持合适的间距，提升布局美观度，可以额外添加gap属性：

.menu{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem; /* 控制链接间的垂直间距，单位可根据需求调整 */
}

调整后，justify-content: center会控制链接在垂直方向居中对齐，align-items: center控制链接在水平方向居中对齐，刚好符合侧边导航的常见布局需求。

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