How to add margins to flex items without changing the width property? Flexbox

I want my #film elements to be evenly distributed in the #flex-container.
I also want to have a 5px margin around each #film element to avoid them clumping up like this:


This is the code for the above image:

#flex-container{
  display:flex;
  flex-flow: row wrap;
}
#film{
  background-color: #fff;
  margin: 0px;
  border-radius: 5px;
  width: 33%;
  flex-grow:1;
}

This is how I want it to look:


And this is the code for it:

#flex-container{
  display:flex;
  flex-flow: row wrap;
}
#film{
  background-color: #fff;
  margin: 5px;
  border-radius: 5px;
  width: 31%;
  flex-grow:1;
}

My question: is there a way to keep margins around the flex items (#film) while also keeping width divided up evenly?
I want to use width: 33%; for three items in the row and width: 50%; for two items in the row.
How do I achieve this?

Here’s my codepen: https://codepen.io/beaCodes/pen/ExYXzRa?editors=1100

Hi, there is a problem with your html and CSS.
You are using the same id for multiple elements (like film, etc). In that case, change your code, both in the html and CSS, into classes.
After that, I think that if you give a flex-grow: 1 to each element like you did, but without specifying the width, you will achieve what you are looking for.

I tried what you suggested. I changed each film to a different class (.film1, .film2, .film3,… .film6) and I gave a flex-grow:1 to each element without setting width. The result was that each element filled up the entire width of the viewport.
I want to have three flex items per row. That was why I wanted to set width: 33% to divide them evenly but I learned that box-sizing: border-box doesn’t take margin into account, only padding and borders. Instead, I tried setting flex-basis: 33% but since i also have margin: 10px (I increased the margins so it looks better), I had to make flex-basis: 31% and set flex-grow: 1.
It works fine but I wanted to know if there’s a way to make keep flex-basis: 33% and also have 10px margins? I’ve been fiddling around with it but still haven’t figured out how to do it.

If they all share the same properties, why not make a single class instead of giving each of them a different class (for this you use the id, but you would generate a ton of repeated code)?
box-sizing set the size taking into consideration the elements of the box model included inside the element you chose. Border-box will have border + padding + content. Content-box will have only the content.

I used a single class because I didn’t want to repeat code. I thought you meant I should change the id #film into several classes so I tried it but then I just used one class. I had understood you wrong, you just meant to change the id into a class but to keep using it for several elements. So we’re on the same page there.
And yeah I like using box-model because of how it works.
I just wanted something that also included margins so I wouldn’t have the adjust the flex-basis value to account for the margins. I wanted to keep the flex-basis percentage at 33% to make a row of three and to have a margin of 10px but it seems that’s not possible?