Brechen Sie ungeordnete Listenelemente mit flexbox @ spaltenübergreifend au
Gibt es eine Möglichkeit, Listenelemente in einer ungeordneten Liste mit flexbox zu trennen? Ich möchte ein Dropdown-Menü mit drei Spalten erstellen.
Zum Beispiel ist mein HTML:
<ul id="nav">
<li><a href="./?>Navigation link 1</a></li>
<li><a href="./?>Navigation link 2</a></li>
<li><a href="./?>Navigation link 3</a></li>
<li><a href="./?>Navigation link 4</a></li>
<li><a href="./?>Navigation link 5</a></li>
</ul>
Ich möchte nicht, dass es so angezeigt wird:
Navigation link 1 | Navigation link 2
Navigation link 3 | Navigation link 4
Navigation link 5 |
Ich möchte, dass es so angezeigt wird:
Navigation link 1 | Navigation Link 5
Navigation link 2 |
Navigation link 3 |
Navigation link 4 |
Ich habe versucht, flexbox zu verwenden und diese Eigenschaften angewendet, aber ich konnte keine Möglichkeit finden, die Listenelemente in mehr als eine Spalte aufzuteilen:
#nav {
display: flex;
flex-direction: column;
}