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;
}

Antworten auf die Frage(2)

Ihre Antwort auf die Frage