display:flex与padding设置不生效，有什么其他方法可以调整侧边栏内容？

问题原因 #

• 你的ul容器未继承侧边栏高度，flex布局的justify-content需要容器有剩余空间才能生效，默认ul高度仅等于内部li内容总高度，没有多余空间分配间距
• 单列flex布局下你用错了对齐属性：align-content是针对多行flex元素的对齐属性，单列布局下水平对齐应该用align-items
• ul默认带浏览器内置的外边距和内边距，会挤压布局空间，需要手动清除

修复后的代码 #

CSS代码

.sidebar{
    border: 2px solid red;
    width: 196px;
    height: 446px;
    background-color: cadetblue;
}
.sidebar ul{
    list-style: none;
    margin: 0; /* 清除ul默认外边距 */
    padding: 0; /* 清除ul默认内边距 */
    height: 100%; /* 继承父容器高度，让flex有剩余空间分配 */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; /* 控制li水平居中，需要左对齐就改成flex-start */
}

HTML代码（无需修改，和原有逻辑一致）

<div class="sidebar">
    <ul>
        <li class="sideitmes">Become Travler</li>
        <li class="sideitmes">Become Guidner</li>
        <li class="sideitmes">Social Media</li>
        <li class="sideitmes">Next Plans</li>
        <li class="sideitmes">privacy policy</li>
    </ul>
 </div>

可选调整说明 #

如果不需要完全均匀分布，也可以给.sideitmes设置上下padding来控制间距，灵活度更高。

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