Flexbox - how to set equal spaces between elements - flexbox

Question

I have unusual approach in using of Flexbox, it is "12 column" design, all works fine, exceptions are the spaces between flex elements, they look different while wrapped and aligned in row. How to fix this?
I play with margin, but it doesn't help:
margin: 1% 1% 1% 1%; ???????
https://jsfiddle.net/cmpt/j7tk30bx/7/
UPDATE:
Idea of this Flexbox is as follows:
if there is a big screen "desktop/pad" i.e. min screen width 841px - do FLEX in 12 column different width system,
for the rest "mobile/small screens" i.e. screen width <841px put wrapper (row) in one full screen width row - one by one.
This works fine, very flexible for web design and putting element where ever you want.
But the problem is that margins(spaces) between FLEXBOX elements (ROW and COL wrappers) are different in those 2 modes and CSS margin parameter top/bottom for example adjusts the view in different way in these 2 modes. I want to have spaces equal between FLEXBOX elements in the both modes.
NOTE:
margin: x 1% x 1%
is a strict rule to have perfect 12 column system
i.e.
.col_12 {width: 98%;}
1%+1%+98%=100%
but I do not know what to do with x (top/bottom) margins
body {
background-color: #998;
}
.row {
margin: 0;
padding: 0;
}
[class*="col_"] {
border-radius: 4px;
background-color: #eed;
margin: 1% 1% 1% 1%;
padding: 0em 0% 0em 0%;
}
#media all and (min-width: 841px) {
.row {
display: flex;
box-sizing: border-box;
flex-direction: row;
flex-wrap: nowrap;
}
.col_1 {width: 6.3%;}
.col_2 {width: 15.0%;}
.col_3 {width: 23.0%;}
.col_4 {width: 31.3%;}
.col_5 {width: 40.0%;}
.col_6 {width: 48.0%;}
.col_7 {width: 56.3%;}
.col_8 {width: 65.0%;}
.col_9 {width: 73.0%;}
.col_10 {width: 81.3%;}
.col_11 {width: 90.0%;}
.col_12 {width: 98%;}
[class*="col_"] {
flex: 0 auto;
}
}
<div class="row">
<div class="col_11">col_11</div>
<div class="col_1">col_1</div>
</div>
<div class="row">
<div class="col_2">col_2</div>
</div>
<div class="row">
<div class="col_12">col_12</div>
</div>
cleaned it up... fiddle updated too

Answer 1

UPDATE- FIX !!!
I have fixed it: margin at bottom 'auto' in #media section helps. In other places we indicate fixed margin (20px in this example), must be in px, not %. Looks fantastic... Tiny and reliable FLEXBOX... Thanks!
[class*="col_"] {
margin: 20px 1% 20% 1%;
}
...
#media all and (min-width: 841px) {
...
[class*="col_"] {
...
margin: 20px 1% auto 1%;
...
}
...
}
https://jsfiddle.net/cmpt/j7tk30bx/