CSS Flexbox Wrap First of Line - html

Question

I'm struggling with the wrapping option of the css flexbox in combination with margins between the items.
What I'm trying to archieve is: Have a flexcontainer with wrapping enabled and a number of items with variable with and minimum width. Between these items I want to have a small gap (margin) but I don't want a margin between the item and the container on the left or right side.
Right now I'm using the first-child and last-child pseudo class but this approach doesn't work unfortunatly when the container wraps the content. See JsFiddle for a minimalistic demo.
HTML
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
</div>
CSS
.container {
display: flex;
flex-wrap: wrap;
border: 1px solid red;
}
.item {
min-width: 100px;
flex: 1;
border: 1px solid black;
margin-left: 20px;
margin-right: 20px;
}
.item:first-child {
margin-left: 0px;
}
.item:last-child {
margin-right: 0px;
}
Any suggestions?

Answer 1

flexbox has some specific properties, so in your case this is what needs to be fixed:
instead of min-width use flex-basis
use justify-content: space-between
to apply margin on items there's a special hack (check out the
example -to fix border coherency apply a wrapper);
.container-bg {
width:100%;
border: 1px solid green;
overflow:hidden;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
/* border: 1px solid red;*/
margin: 0 -20px;
}
.item {
/*min-width: 100px;*/
flex: 1 0 100px;/*if you want to set 100px as min-width you'll have to set flex-shrink to 0*/
border: 1px solid black;
margin: 0 20px;
}
/*.item:first-child {
margin-left: 0px;
}
.item:last-child {
margin-right: 0px;
}*/
<p>resize the window for wrapping</p>
<div class="container-bg"><div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
</div></div>
EDIT :
set flex-shrink to 0 is don't want to go below a certain width..

Answer 2

If you add another wrapper around your items, you can use this dirty hack: https://jsfiddle.net/xw5uo2j1/13/
You set your main container to be 100% of the width, then your "sub" container to be 100% plus the amount of space between you're going to add. Then add the same amount of margin-right to the items.
.maincontainer {
width:100%;
border: 1px solid red;
}
.container {
display: flex;
flex-flow: row wrap;
justify-content:space-between;
align-content:space-between;
width:calc(100% + 5px);
}
.item {
min-width: 100px;
flex: 1;
border: 1px solid black;
margin-right:5px;
}
<p>resize the window for wrapping</p>
<div class="maincontainer">
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
</div>
</div>

Answer 3

UPDATED, with more than 5 items
Use calc and jusify-content: space-between;
* {
box-sizing: border-box;
margin: 0;
}
.container {
border: thin solid red;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -10px;
}
.item {
border: thin solid black;
-webkit-flex: 1 1 calc(20% - 20px);
flex: 1 1 calc(20% - 20px);
margin: 0 10px;
padding: 20px;
position: relative;
}
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
</div>