Add a margin to li using flexbox

Question

I am using flexbox to layout my things. I have 5 lis (so far, but that will change), with the following width: flex-basis:calc(100%/3). So there will be 3 li's in each row. The wrapper (ul) has a width of 70%.

So far so good. The problem is, when I add a margin to the li's. When I add a margin to the li's, there will only be 2 li's in each row with some extra space, but I need 3.

So I found 2 solutions that give me other problems:

• One solution would be to add the margin to the li's, let's say 10px. Then subtract 20px (10 * 2) from the width and height of each li's. I can't do that, because I need the li's to be the size I set, and not smaller.

• Another solution would be to set justify-content to either space-around or space-between. The problem with that is that I need the lis to be in columns and rows, (like a chart). And if I change justify-content, the li's wouldn't be in a chart like order.

Is there a way to add a margin to the li without affecting any other property's?

(I'm open to JavaScript/JQuery if that's the only choice.)

JSFiddle

Here's a code snippet:

body, html {
    height:100%; margin: 0; padding:0;
}
#flexWrapper {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    overflow: auto;
}
#flexContainer {
    width: 70%;
    background-color:yellow;
	list-style-type: none;
	padding: 0;
    margin: auto;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content:flex-start;
}
li {
    background-color: tomato; border: 1px solid black; height:50px;
    box-sizing: border-box;
    flex-basis:calc(100%/3);
    margin:10px;
}

<div id="flexWrapper">
    <ul id="flexContainer">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
    </ul>
</div>

Answer 1

Ok, so I finally got an answer that works! I have to give partial credit to @Syahrul for starting up the idea (in the comments).

So basically what I'll be doing is this. If we want to add 1.5% of a margin, we'll add (1.5 * 2) * 3 (1.5 * 2 because the margin is on both sides of every li. * 3 because we have 3li'sin every row.) to thewidthof the wrapper ('#flexContainer), so we have 79% of a width for #flexContainer.

Next, we'll subtract 3% (margin size (1.5 * 2)) from the width of the li. And that's flex-basis:calc(100%/3 - 3%).

And there you have it! Here's the updated JSFiddle

body, html {
    height:100%; margin: 0; padding:0;
}
#flexWrapper {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    overflow: auto;
}
#flexContainer {
    width: 79%;
    background-color:yellow;
	list-style-type: none;
	padding: 0;
    margin: auto;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content:flex-start;
}
li {
    background-color: tomato; border: 1px solid black; height:100px;
    box-sizing: border-box;
    flex-basis:calc(100%/3 - 3%);
    margin:1.5%;
}

<div id="flexWrapper">
    <ul id="flexContainer">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
    </ul>
</div>