Center wrapped items in a space-between flexbox

user_4659324 0
Viewed 2943

For a navigation section, I want it to use space-between justification. For smaller displays where the navigation might have to wrap, I'd like the items to center themselves, as opposed to sticking to the left when alone on a row. 

nav {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  justify-content: space-between;
}
<nav>
  <div class='item'>
    Item 1 is alone on its row if the window is small, but is not centered.
  </div>
  <div class='item'>
    Item 2 is very much like item 1.
  </div>
</nav>

Codepen demo: https://codepen.io/anon/pen/MmdOMP?editors=1100#0

flexbox mobile dynamic css
2 Answers

LGSon's comment makes sense to me, but presumably OP wants the ability to modify dynamic text that may or may not fit in a container, regardless of flexbox config or media query.

Look into JS that detects line wraps, then triggers an action (e.g. centering the text).

For example: https://github.com/xdamman/js-line-wrap-detector

Or, JS that automatically resizes text to fit within a container. Useless for all kinds of situations.

For example: http://www.fittextjs.com

user_43783140
Related