Centered objects in the space between flexbox

Question

For the navigation section, I want it to use an excuse space-between. For small displays where navigation navigation may be required, I would like the elements to center themselves rather than stick to the left when one is in 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>

Run codeHide result

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

Answer 1

LGSon's comment makes sense to me, but apparently the OP wants to change dynamic text that may or may not fit into the container, regardless of the flexbox config or media request.

JS, , (, ).

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

JS, . .

: http://www.fittextjs.com

Answer 2

2 :

• - CSS ;
• JS, :

, 100% , , , 100% , , , , :

function justifyCenter() {
    var navWidth = $("nav").width();
    var itemWidth = $(".item:first-child").width();

    if (navWidth === itemWidth ) {
        $("nav").addClass('justify-center');
    } else {
        $("nav").removeClass('justify-center');
    }
}

Codepen demo: https://codepen.io/anon/pen/WzgpLw