css - Create free spaces between elements inside wrapper -

in css margins covers top , bottom margin. need reach result left end right.

--edit--

elements should align left

please see example:

.a{    width: 100px;    height: 100px;    margin: 0 12px;    border: 1px solid red;  }  .b{    width: 100px;    height: 100px;    margin: 0 12px;    border: 1px solid green;  }  .c{    width: 100px;    height: 100px;    margin: 0 12px;    border: 1px solid blue;  }  .root{   display: flex;    border: 1px solid black;  }

<div class="root">  <div class="a">  </div>  <div class="b">  </div>  <div class="c">  </div>  </div>

in case need have:

.a right margin 12px

.c left margin 12px

if there .a , .b need have:

.a right margin 12px.

if there n elements inside .root need have:

.element1 right margin 6px

.element2 left , right margin 6px

.element3 left , right margin 6px

.element4 left , right margin 6px

..... 

.elementn left margin 6px

summary margin between elements should 12px. there should no left margin first element , no right margin last element.

i show how manually, possible set in css if css level not know how many element have?

this do

.root  {    display:flex;    justify-content:space-between;   }    .a{    width: 100px;    height: 100px;    margin: 0 12px;    border: 1px solid red;  }  .b{    width: 100px;    height: 100px;    margin: 0 12px;    border: 1px solid green;  }  .c{    width: 100px;    height: 100px;    margin: 0 12px;    border: 1px solid blue;  }  .root{   display: flex;    border: 1px solid black;  }

<div class="root">  <div class="a">  </div>  <div class="b">  </div>  <div class="c">  </div>  </div>