CSS flex wrapping

http://stackoverflow.com/questions/19574851/ For stack overflow question. Experimenting with controlling line breaks in css3 flex module, so as to not leave orphaned menu items when the containing element shrinks too much.

by Chris Sullins

HTML

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

CSS

body {
    color: #666;
    font-weight: bold;
    font-family: sans-serif;
}
p, ul {
    padding: 1em;
}
ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background: #eee;
}
ul.narrow {
    max-width: 15em;
}
ul.narrow li {
    flex-basis: 7.5em;
}
li {
    flex: 4em 1 0;
    padding: 0.2em;
    box-sizing: border-box;
    border: solid 2px #666;
    margin: -2px -2px 0 0;
    text-align: center;
}
li:first-child {
    border-left-style: solid;
}

JavaScript

var html = '<p><button>Make narrow</button></p>';
$(html).click(function() {
    var $menu = $('ul'), cls = 'narrow';
    if ($menu.toggleClass(cls).hasClass(cls)) {
        $('button').text('Make wide');
    } else {
        $('button').text('Make narrow');
    }
}).prependTo('body');