How to place 3 flex items (div) with equals sizes inside flex container

Question

I want to place 3 flex items (let's say div) inside flex container with space-between divs.

Flex container's width is 1000px

Size of each div should be equals to another.

For example:

Div1 = width: 330px + 3px space between
Div2 = width: 330px + 3px space between
Div3 = width: 330px + 3px space between

Answer 1

Simply like this:

.container {
  display:flex;
  width:1000px;
  border:1px solid;
  justify-content:space-between;
  height:50px;
} 
.container > * {
  flex-basis:330px;
  background:red;
}

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

Answer 2

try something like this, flex-grow set div to the same width.

.flex-container{
  display: flex;
}

.flex-container div{
  background: red;
  flex-grow: 1;
  margin-right: 3px;
}

.flex-container div:last-child{
  margin-right: 0;
}

<div class='flex-container'>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>