How to set margin of item in flexbox? - html

Question

I want to set the margin of items in a flexbox to 2%.
But if I set each margin to 2%, they don't have same length visually.
I want to set distance to 2% between each item.
Also, i wanna set 2% distance from border of flexbox.
#wrap {
width: 800px;
}
#left {
width: 550px;
height: inherit;
float: left;
}
#flexbox {
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-left: 2%;
width: 100%;
overflow: hidden;
height: 500px;
}
.item {
width: 47%;
height: 200px;
margin-right: 2%;
}
<div id="wrap">
<div id="left">
<div id="flexbox">
<div class="item">div1</div>
<div class="item">div2</div>
<div class="item">div3</div>
<div class="item">div4</div>
</div>
</div>
</div>

Answer 1

The way I do it is using nested div and apply the margin within those divs, this ways you can have more controls over margin. Since you are using flexbox, you can use flex-basis and flex-grow to distribute your divs instead of using width and height.
You can try this:
*{
margin:0;
padding:0;
}
#wrap {
width: 800px;
background:#ece8e8;
overflow:hidden;
}
#left {
width: 550px;
height: inherit;
float: left;
background:#b8b8b8;
}
#flexbox {
display: flex;
flex-direction: column;
flex-wrap: wrap;
/*margin-left: 2%;*/
width: 100%;
overflow: hidden;
height: 500px;
}
.item {
/*width: 47%;*/
/*height: 200px;*/
/*margin-right: 2%;*/
background: grey;
flex-basis: 50%;
flex-grow: 1;
}
.item>div {
background: #454444;
margin: 2%;
height: 100%;
}
.item:nth-child(1)>div,
.item:nth-child(2)>div{
margin-right: 0%;
}
<div id="wrap">
<div id="left">
<div id="flexbox">
<div class="item"><div>div1</div></div>
<div class="item"><div>div2</div></div>
<div class="item"><div>div3</div></div>
<div class="item"><div>div4</div></div>
</div>
</div>
</div>