Chad Chad - 3 months ago 16
CSS Question

Break unordered list items across columns with flexbox

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

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.

Comments