html - 设置 flex 元素间距

我在容器中有三个与中心对齐的弹性元件。物品之间如何间隔？例如：第一个应位于容器左侧，第二个应位于中心，第三个应在右侧。这是一个小提琴：
https://jsfiddle.net/usernamenn/y1L6k5ap/
这是代码：

.herodownload {
    width: 100%;
    background-color: #f2f2f2;
    margin-top: 90px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.android {
    flex-grow: 1;
}

.ios {
    flex-grow: 1;
}

.windows {
    flex-grow: 1;
}

/ *最终英雄下载* /

<div class="herodownload"> <!-- hero download -->
        <div id="android"><img src="images/vignetta.png"></div>
        <div id="ios"><img src="images/vignetta.png"></div>
        <div id="windows"><img src="images/vignetta.png"></div>
            <div class="downlad_buttons">
                <div id=""></div>
                <div id=""></div>
                <div id=""></div>
            </div>
    </div>
     <!-- end main site content -->

最佳答案

您需要使用justify-content: space-between而不是justify-content: center，因为后者会将项目整体对齐。

space-between允许flex子代之间的边距相等。如果容器内除了flex子代之间具有相等的边距之外，还需要相同的填充/边距，也可以使用space-around。

修改后的输出：

/* homepage heading and paragraph style */

.hero_description {
  color: #333;
  text-align: center;
  margin-top: -60px;
  overflow: hidden;
  z-index: -100;
}
#hero_heading {
  font-size: 6em;
}
#hero_paragraph {
  font-size: 2.3em;
  margin-top: -55px;
}
/* end homepage heading and paragraph*/

/* hero download */

.herodownload {
  width: 100%;
  background-color: #f2f2f2;
  margin-top: 90px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; /* Modified */
}
.android {
  flex-grow: 1;
}
.ios {
  flex-grow: 1;
}
.windows {
  flex-grow: 1;
}
/* end hero download */

<div class="herodownload">
  <!-- hero download -->
  <div id="android">
    <img src="images/vignetta.png">
  </div>
  <div id="ios">
    <img src="images/vignetta.png">
  </div>
  <div id="windows">
    <img src="images/vignetta.png">
  </div>
  <div class="downlad_buttons">
    <div id=""></div>
    <div id=""></div>
    <div id=""></div>
  </div>
</div>
<!-- end main site content -->