Flexbox avec 3 colonnes

Bonjour,

Je cherche à mettre des produits sur une page, et j'aimerais qu'ils soient placés en trois colonnes.
Cependant lorsque j'ai 5 articles, les deux derniers se placent à droite et à gauche (la colonne du milieu est vide) et au lieu de à gauche et au milieu. (la colonne de droite devrait être vide)

Voici le code (grandement simplifier mais qui montre le problème) :

Le HTML :

      <div class="box">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
        <div>Five</div>
        <div>Six</div>
        <div>Seven</div>
        <div>Eight</div>
        <div>Nine</div>
        <div>Ten</div>
        <div>Eleven</div>
      </div>

Le CSS :

    .box {
        width: 500px;
        display: flex;
        flex-wrap: wrap;
      }
      .box>* {
          flex: 0 0 33.3333%;
      }

Merci d'avance !

Bonne journée

Salut

Ton code ne montre pas du tous le problème, il fonctionne très bien avec les deux dernières colonnes qui sont bien a gauche au milieu.

https://codepen.io/JUSEN/pen/XGNdxP
Modifié par JENCAL (05 Mar 2019 - 16:07)

Déjà excellente idée que de passer a flexbox, si tu galères voici un lien qui pourra t'aider: https://www.booglit.com/flexbox-partie-1/
Modifié par pepsi (08 Mar 2019 - 21:32)