Html 为什么不是'；t flex wrap：将移动的li元素包装到屏幕上的下一行？

我正在尝试使用flex-wrap:wrap让我的无序列表（ul class=“main-nav-list”）随着屏幕的减少移动到下一行。当前，当我将其应用于li元素时，它们将离开屏幕而不会移动到下一行。我已经尝试在我的代码的每一层中使用flex-wrap:wrap，您可以从注释掉的部分看到这一点

我的Html是：

    <div class="main-image">
        <header class="header">

            <div class="main-nav">
                <ul class="main-nav-list">
                    <li>Home</li>
                    <li>About&nbsp;Us</li>
                    <li>Our&nbsp;Faith</li>
                    <li>Schedule</li>
                    <li>Patron&nbsp;Saint</li>
                    <li>Parish&nbsp;Hall</li>
                </ul>
            </div>
        </header>
    </div>

您的代码工作正常：您的代码工作正常：

.main-nav {
    height: 100%;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 60px;

    &-list{
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        flex: 1;

        & li {
            display: flex;
            flex-wrap: wrap;
            height: 100%;
            color: var(--color-white-1);
            font-size: 3rem;
            list-style: none;
            padding: 4rem;
            flex: 1;
        }
    }
}