justify-content设置的位置不生效 垂直侧边栏布局未达预期

问题原因 #

1. justify-content 仅对声明了 display: flex 或 display: grid 的容器生效，你给 .toplefticon、.icons_ul 设置了该属性，但这两个元素都没有被声明为弹性容器，属性自然不生效。
2. 父容器 .snavbarcontainer 已经是垂直方向的flex布局，你需要控制的是flex子元素的垂直位置，而非直接给子元素加justify-content。
3. 功能列表外层还有.mainIcons容器，你没有给该容器设置任何弹性属性，它默认仅包裹内容高度，无法让内部的列表居中。

解决方法 #

修改你的SCSS代码即可，修改后的代码如下：

body {
    margin: 0
}

.snavbarcontainer {
    background-color: black;
    width: 3.5em;
    height: 100vh;
    position: fixed;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 顶部图标容器，可以加个上边距避免贴顶 */
.toplefticon {
    margin-top: 1em;
}

/* 让功能图标容器占满剩余垂直空间，内部flex居中 */
.mainIcons {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icons_ul {
    text-decoration: none;
    list-style-type: none;
    padding: 0;
    
    li {
        margin: 1em 0;
    }
}

补充说明：你JSX里的<a class="test"> 最好改为 <a className="test"> 避免React语法警告，不过这个问题不影响布局效果。

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