CSS display:flex属性不生效无法实现容器内元素水平排列求助

• 核心配置缺失：你编写的.flex样式类仅设置了flex-direction: row，没有添加flex布局的必填基础属性display: flex，浏览器不会将对应容器识别为弹性布局容器，弹性排列规则自然不会生效。
• HTML结构嵌套错误：你将<nav>导航标签嵌套在了<h1 class="logo">标签内部，导致.container.flex容器下仅存在1个直接子元素，就算flex配置正确也无法实现logo与导航栏的水平排列。

1. 修改CSS代码 #

仅需要调整.flex类的配置，补充核心属性即可，可额外添加对齐属性适配导航栏样式：

.flex {
    display: flex; /* 必加，声明当前容器为弹性布局容器 */
    flex-direction: row;
    justify-content: space-between; /* 可选，实现logo靠左、导航靠右的常规导航栏布局 */
    align-items: center; /* 可选，实现子元素在70px高的导航栏内垂直居中 */
}

2. 修改HTML结构 #

将<nav>标签从<h1>内部移出，作为.container.flex的直接子元素：

<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <div class="container flex">
            <h1 class="logo">Charles</h1>
            <nav>
                <ul>
                    <li> <a href="index.html">首页</a></li>
                    <li> <a href="projects.html">项目</a></li>
                    <li> <a href="hobbies.html">爱好</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>

修改完成后刷新页面即可看到logo和导航栏水平排列的效果。

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