为什么 flex-direction: row 仅在我将元素设置为 display: inline-block 时才起作用？

Question

flex-direction:row仅在我在nav li{}内添加display: inline-block时才有效。 我知道是因为-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

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

在<nav>级别设置的 Flex 使<ul>成为一个弹性项目，并且不会影响<li>元素。

您希望 Flex 容器为<ul> 。