响应式导航栏响应问题

Question

好的，我正在尝试让我的导航栏响应，但我遇到了一些麻烦

我的html和我的css

     @media (max-width: 600px) {
        .toggle-btn {
            display: flex;
        }

        .logo {
            display: none;
        }

        header {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .row ul {
            display: flex;
            flex-direction: column;
        }
    }

     <header>
            <div class="container">
                <a href="" class="toggle-btn">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </a>
                <div class="row">
                    <a href="index.html" class="logo"><img src="myLogo.png"></a>
                    <nav>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Work</a></li>
                            <li><a href="#">About us</a></li>
                            <li><a href="#">Support</a></li>
                        </ul>
                    </nav>
                </div>  
            </div>
        </header>

好的，到目前为止，我已经在专栏中显示了 li。现在我想让他们到页面的中心。我已经尝试了很多像 justify-content: center;并证明项目：中心；和文本对齐中心；我不知道该怎么做，有人可以帮忙吗？

谢谢:)

Answer 1

align-items: flex-start; 应该是 align-items: center;

我建议阅读一些关于 Flexbox 的文章，this 将是一个好的开始。

响应式导航栏响应问题

Responsive navigation bar responsive issue

html

css

responsive-design

responsive