Break responsive list in the middle

Question

I have a responsive menu, laid out as an unordered list. At larger sizes, it's inline and looks nice: But as the window shrinks, it breaks and looks awkward: Ideally, I'd like it to break evenly in half when it overflows, like this: Using a <wbr> in the list doesn't seem to do anything and I'm out of ideas. This question/solution, which suggests using inline-block, works well for paragraphs but doesn't seem to work with lists.

Here's a CodePen example that demonstrates the breaking issue:
http://codepen.io/anon/pen/xVoLov?editors=1100

Yes, good question - it should break in half when it overflows. I'll update the question. — JeffThompson, May 19 '16 at 22:19
Possible duplicate of [html (+css): denoting a preferred place for a line break](http://stackoverflow.com/questions/5392853/html-css-denoting-a-preferred-place-for-a-line-break) — 4castle, May 19 '16 at 22:22

score 1 · Answer 1 · answered May 19 '16 at 22:21

You can change width with media queries to 33% of each li

* {
  box-sizing: border-box;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#wrapper {
  width: 90%;
  max-width: 700px;
  margin: 30px auto;
  padding: 30px;
  border: 1px solid black;
  overflow: hidden;
  text-align: center;
}
li {
  float: left;
  padding: 0 1em;
}
@media screen and (max-width: 768px) {
  li {
    width: 33%;
  }
}
@media screen and (max-width: 480px) {
  li  {
    width: 50%;
  }
}

<div id="wrapper">
  <ul>
    <li>Thing One</li>
    <li>Thing Two</li>
    <li>Thing Three</li>
    <!-- ideally, break here -->
    <li>Thing Four</li>
    <li>Thing Five</li>
    <li>Thing Six</li>
  </ul>
</div>

This is a really nice simple solution. But (I think) it only works for 3- or 6-element lists (ie: looks weird if the list has 4 elements). Is it possible there's a more universal solution? — JeffThompson, May 19 '16 at 23:50
@JeffThompson I am not sure what you mean by `more universal solution`? — Nenad Vracar, May 20 '16 at 09:02

score 1 · Answer 2 · answered May 19 '16 at 23:20

You can try with display:flex.

This is a great article about this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The flexbox are amazing but have problems with old browsers (internet explorer...). You can check the compatibility here: http://caniuse.com/#feat=flexbox

Break responsive list in the middle

2 Answers2