如何在弹性容器内放置3个大小相等的弹性项目（div）[重复]答案

【问题标题】：How to place 3 flex items (div) with equals sizes inside flex container [duplicate]如何在弹性容器内放置3个大小相等的弹性项目（div）[重复]
【发布时间】：2018-12-27 08:46:04
【问题描述】：

我想在 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

【问题讨论】：

标签： html css flexbox

【解决方案1】：

试试这样的方法，flex-grow 将 div 设置为相同的宽度。

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

【讨论】：

【解决方案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>

【讨论】：