如何在Flex容器中放置3个相等大小的Flex项目（div）

Question

我想在flex容器内放置3个flex项目（比如div），并且div之间有间隔。

Flex容器的宽度为1000px

每个div的大小应相等。

例如：

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

Answer 1

尝试类似的操作，然后将div的flex-grow设置为相同的宽度。

.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>

Answer 2

就像这样：

.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>