為什么 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> 。