CSS Flex布局中justify-content: space-evenly不生效问题排查

刚学Flex布局，觉得掌握基础后上手实践，结果布局出问题了。核心是ul里的justify-content: space-evenly完全没效果，查了资料确认写法没错，甚至见过教程里相同结构的用法。给ul加了红色边框确认有足够空间，试了其他Flex属性也没用，怀疑是不是哪里禁用了Flex功能？

CSS代码 #

h1 {
    font-size: 6em;
    text-align: center;
}
nav {
    font-size: 1.5em;
    display: flex;
    justify-content: space-between;
}

ul {
    border: 1px solid red;
    display: flex;
    flex-grow: 1;
    justify-content: space-evenly;
    max-width: 50%;
}

ul,li {
    display: inline;
    margin: 0;
    padding: 0;
}

HTML代码 #

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Queries</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="app.css">
</head>

<body>
    <nav>
        <a href="#home">Home</a>
        <ul>
            <li>
                <a href="#Home">Learn More</a>
            </li>
            <li>
                <a href="#Home">About</a>
            </li>
            <li>
                <a href="#Home">Contact</a>
            </li>
        </ul>
        <a href="#signup">Sign Up</a>
    </nav>
    <h1>Flex Box</h1>
</body>

</html>

问题出在最后一行ul,li { display: inline; }——这行代码把ul的display: flex给覆盖了！

CSS选择器权重相同时，后面的规则会覆盖前面的。你先给ul设置了display: flex，但紧接着的组合选择器又把ul的display改成了inline，直接导致Flex布局失效，justify-content这类Flex属性自然起不了作用。

解决办法很简单：把ul从组合选择器里拆出来，单独给li设置样式即可。修改后的CSS如下：

h1 {
    font-size: 6em;
    text-align: center;
}
nav {
    font-size: 1.5em;
    display: flex;
    justify-content: space-between;
}

ul {
    border: 1px solid red;
    display: flex;
    flex-grow: 1;
    justify-content: space-evenly;
    max-width: 50%;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    margin: 0;
    padding: 0;
}

这样ul的Flex布局就能正常生效，justify-content: space-evenly会按预期把三个li均匀分布在容器内。

内容的提问来源于stack exchange，提问作者Kal-Toh