How to specify an element after which to wrap in css flexbox? [duplicate]

by

I don’t think this is part of the flexbox standard yet, but is there maybe a trick to suggest or force wrapping after a certain element? I’d like to respond to different page sizes and wrap a list differently without extra markup, so that rather than having (for example) orphaned menu items on the next line, I break in the middle of the menu.

Here’s the starting html:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

And css:

ul {
    display: flex;
    flex-wrap: wrap;
}

I’d love something like the following:

/* inside media query targeting width */
li:nth-child(2n) {
    flex-break: after;
}

See the jsfiddle for a more complete setup: http://jsfiddle.net/theazureshadow/ww8DR/

5 Answers
5

Leave a Comment