Why does flex-direction: row only work when I set the element to display: inline-block?

Question

The flex-direction:row is only working when I add display: inline-block inside nav li{} . I know it because -webkit-flex-direction: row-reverse; is working. But other properties like justify-content: space-between; are not working.

And the opposite; if I remove display: inline-block inside nav li{} , then only flex-direction:column is working. What is the problem?

 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

It only gives you the illusion that it works.

Flex set at the <nav> level makes the <ul> a flex item, and doesn't affect <li> elements.

You want the Flex container to be <ul> .