flex- direction: строка для nav работает только когда я установил nav для отображения: inline-block

Question

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

nav li{
list-style: none;
}

Строка flex-direction: работает только при добавлении display: inline-block внутри nav li{}. Я знаю это, потому что -webkit-flex-direction: row-reverse; работает. Но другие свойства, такие как justify-content: space-ween; не работают.

И наоборот, если я уберу display: inline-block внутри nav li {}, тогда работает только flex-direction:column. В чем проблема? HTML target:

       <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> гибкий элемент, и не влияет <li> элементы.

Вы хотите, чтобы контейнер Flex был <ul>,