html - 设置 flex 元素间距

Question

我在一个容器中有三个 flex 元素，它们与中心对齐。如何在元素之间留出一些间距？例如:第一个应该放在容器的左边，第二个应该放在中间，第三个应该放在右边。这是一个 fiddle : 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 -->

Answer 1

您需要使用 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 -->