Break unordered list items across columns with fle

Question

Is there a way to break list items inside an unordered list with flexbox? I want to create a 3-column drop-down menu.

For example, my html is:

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

I don't want it to display like this:

Navigation link 1 | Navigation link 2
Navigation link 3 | Navigation link 4
Navigation link 5 |

I want it to display like this:

Navigation link 1 | Navigation Link 5
Navigation link 2 |
Navigation link 3 |
Navigation link 4 |

I tried using flexbox and I applied these properties but I couldn't find a way to break the list items into more than 1 column:

#nav {
  display: flex;
  flex-direction: column;
}

Answer 1

An initial setting of a flex container is flex-wrap: nowrap.

This means that flex items are forced to stay in a single line.

To create a multiline flex container you can override this setting with flex-wrap: wrap.

It's also important to define a height for the container. Otherwise, additional flex items may simply expand the container with no need to wrap.