Flexbox: élément centré avec des éléments autour de l'espace de chaque côté

Vous devez modifier votre nav structure et départ de 3 conteneurs gauche, center et droit. DEMO

HTML

gauche et droit quelques liens, center est un lien.

<nav>
<span>
    <a href="#">aaa </a>
    <a href="#">aa </a>
    <a href="#">a </a>
    </span>
    <a href="#"> center </a>
    <span>
      <a href="#">bbbb </a>
      <a href="#">bbbbb </a>
      <a href="#">bbbbbb </a>
    </span>
</nav>

CSS

nav va prendre display:flex et justify-content:space-between, donc gauche et droit.

nav, nav span {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;/* so they do not overlap each other if space too short */
}

Pour générer un décalage au niveau des bords de droit et gauche vers le centre, nous nous contentons d'ajouter un pseudo-élément (ou un élément vide).

span:first-of-type:after,
span:last-of-type:before{
    content:'';
    display:inline-block;/* enough , no width needed , it will still generate a space between */
}

gauche et droit peut prendre un flex valeur plus haut1 , pour éviter d' center pour étendre trop.

nav > span {
    flex:2; /* 2 is minimum but plenty enough here  */
}

dessinons nos boîtes de liens:

a {
    padding:0 0.25em;
    border:solid;
}

DEMO