html - 为什么 flex-direction : row only work when I set the element to display: inline-block?

Question

只有当我在 nav li{} 中添加 display: inline-block 时，flex-direction:row 才有效。我知道它是因为 -webkit-flex-direction: row-reverse; 正在工作。但是 justify-content: space-between; 等其他属性不起作用。

相反；如果我在 nav li{} 中删除 display: inline-block，则只有 flex-direction:column 可以工作。有什么问题？

nav{
    background: grey;
    display:-webkit-flex;
    -webkit-flex-direction: row;
}

nav li{
    list-style: none;
}

<nav>
    <ul>
        <li><a href="#about">About</a><li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#education">Education</a></li>
        <li><a href="#experience">Experience</a></li>   
        <li><a href="#portfolio">Portfolio</a></li>
    </ul>
</nav>

Answer 1

它只会给你一种它有效的错觉。

Flex 设置在 <nav>水平使得<ul> flex 元素，不影响 <li>元素。

您希望 Flex 容器为 <ul> .