Center wrapped items in a space-between flexbox

Question

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

Answer 1

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

Answer 2

There can be 2 solutions from my point of view:

1. Use CSS media queries or;
2. JS solution, explained below:

When item is wrapped it takes 100% width, what you need to do is to check on window resize event the width of the item, and if it is 100% relative to the parent element that means it was wrapped, you can add a class at this point and remove it when the statement is false:

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