Une grille flexbox avec trois (3) lignes et quatre (4) colonnes

j'ai un div et j'ai 12 articles alignés au centre en utilisant flex.

mais je veux juste avoir 4 articles dans la rangée, donc je veux 3 rangées de 4 colonnes.

ça a à voir avec flex? Et savez-vous comment faire?

j'essaie de faire ça comme ça: https://jsfiddle.net/18mzsqcx/1 / , mais ça ne marche pas.

ou il est préférable de simplement créer un div par exemple .col4 avec largeur égale à 25% et quelques marges et mettre cette classe .col4 dans chaque article? 

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.container {
  float: left;
  width: 100%;
  background-color: red;
}

.content {
  width: 94%;
  margin: 0px auto;
  background-color: yellow;
  padding: 30px;
}

.categories {
  display: flex;
  justify-content: space-between;
  background-color: blue;
}

.categories_item a {
  color: green;
}

.categories_item {
  flex-grow: 1;
}
<div class="container">
  <div class="div content">


    <div class="categories">
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>

    </div>
  </div>
</div>
2
demandé sur Michael_B 2017-07-28 20:49:23

2 réponses

par défaut, un conteneur flex est défini à flex-wrap: nowrap . Cela signifie que les articles flex ne seront pas en mesure d'envelopper de nouvelles lignes.

Donc, la première chose que vous devez faire est d'ajouter flex-wrap: wrap à votre conteneur. 

.categories {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;  /* NEW */
}

ensuite, définissez vos articles flex de sorte que seulement quatre peuvent tenir sur une rangée.

au lieu de: 

.categories_item { flex-grow: 1; }

essayez ceci: 

.categories_item { flex: 1 0 20%; margin: 5px; }

démo révisée 

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  float: left;
  width: 100%;
  background-color: red;
}

.content {
  width: 94%;
  margin: 0px auto;
  background-color: yellow;
  padding: 30px;
}

.categories {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;                /* NEW */
}

.categories_item a {
  color: white;
}

.categories_item {
  flex: 1 0 20%;                 /* NEW */
  margin: 5px;                   /* NEW */
  background-color: blue;
}
<div class="container">
  <div class="div content">
    <div class="categories">
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
      <div class="categories_item">
        <a href="" class="">
          <span>Item</span>
        </a>
      </div>
    </div>
  </div>
</div>
2
répondu Michael_B 2017-07-28 18:09:27

cela fera l'affaire, garder trois éléments dans un div, il y aura donc 4 divs pour 12 articles 

.container {
  float: left;
  width: 100%;
  background-color: red;
}

.content {
  width: 94%;
  margin: 0px auto;
  background-color: yellow;
  padding: 30px;
}

.categories {
  display: flex;
  justify-content: space-between;
  background-color: blue;
}

.categories_item a {
  color: green;
}

.categories_item {
  flex-grow: 1;
}
<div class="container">
  <div class="div content">


    <div class="categories">
      <div id="row">

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>


        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>
      </div>
      <div id="row">
        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>


        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>
        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>
      </div>
      <div id="row">
        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>

        <div class="categories_item">
          <a href="" class="">
            <span>Item</span>
          </a>
        </div>
      </div>

    </div>
  </div>
</div>
2
répondu Owais 2017-07-28 18:02:50