html - A flexbox grid with three (3) rows and four (4) columns -

i have div , have 12 items aligned @ center using flex.

but want have 4 items in row, want 3 rows of 4 columns.

this ok flex? , know how do?

i'm trying this: https://jsfiddle.net/18mzsqcx/1/, it's not working.

or it's better create div example .col4 width equal 25% , margins , put class .col4 in each item?

*,  *: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 {    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>

by default, flex container set flex-wrap: nowrap. means flex items not able wrap new lines.

so first thing should add flex-wrap: wrap container.

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

then, define flex items 4 can fit on row.

instead of this:

.categories_item { flex-grow: 1; } 

try this:

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

revised demo

*,  *: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 {    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>