Flex布局导航存在空白区域，如何消除绿色未利用部分？

问题根源 #

你的代码中，nav.active ul 设置了 width:100%，同时 ul 的 justify-content: center 会让内部的 li 元素居中排列，这就导致了左右两侧出现空白区域。另外，nav 作为 Flex 容器，包含 ul 和 button 两个子元素，强制给 ul 设置 width:100% 会把 button 挤出可视范围，这也是潜在问题。

针对性解决方案 #

1. 让导航项均匀填满横向空间 #

如果希望4个导航项均匀分布，消除空白，将 ul 的 justify-content 从 center 改为 space-between 或 space-around：

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* 项间等距，两端贴边 */
    /* 可选：justify-content: space-around; 项两侧等距 */
    width: 0;
    opacity: 0;
    font-size: 1.2rem;
    margin: 10px;
}

2. 让导航项靠左对齐 #

如果只需要导航项靠左排列，消除右侧空白，修改 justify-content 为 flex-start：

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* 靠左对齐 */
    width: 0;
    opacity: 0;
    font-size: 1.2rem;
    margin: 10px;
}

3. 修复导航栏整体布局（保留按钮显示） #

原代码中 button 会被 width:100% 的 ul 挤出，若要同时显示导航和按钮，去掉 ul 的 width:100%，改用 flex:1 让 ul 占据剩余空间：

nav.active ul {
    opacity: 1;
    flex: 1; /* 替换width:100%，让ul占据nav内剩余空间 */
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* 按需选择对齐方式 */
    width: 0;
    opacity: 0;
    font-size: 1.2rem;
    margin: 10px;
    padding: 0; /* 清除默认内边距，避免额外空白 */
}

4. 清除默认边距（可选） #

浏览器默认会给 ul 设置内外边距，可能导致额外空白，建议添加：

nav ul {
    margin: 0; /* 替换原有margin值，或按需调整 */
    padding: 0;
}

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